10. Модулі ES6

Модулі ES6 дозволяють створювати JavaScript-додатки, структуровані у вигляді незалежних та багаторазово використовуваних модулів.

10.1. Скрипт [import-01, export-01]

Скрипт [import-01] використовуватиме модуль [export-01]. Останній визначено таким чином:


// експорт за замовчуванням об’єкта без імені
export default {
  data: 2,
  do() {
    console.log(this.data);
  }
};

Коментарі

рядки [2-7] визначають об’єкт без імені з властивостями [data, do];
рядок 2: інструкція [export default] експортує цей об’єкт. Отже, його можна буде імпортувати;

Модуль [export-01] використовується скриптом [import-01] наступним чином:


'use strict';
// імпорт об’єкта, експортованого за замовчуванням
import export01 from './export-01';
// використання цього об’єкта
export01.do();
// експорт за замовчуванням можна імпортувати під будь-яким іменем
import data from './export-01';
console.log(data.data);

Коментарі

у рядках 3 та 7 імпортується об’єкт, експортований за замовчуванням з модуля [export-01], під двома різними іменами;
після імпорту об’єкта його можна використовувати так, ніби він був визначений локально у скрипті;

Виконання


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\modules\import-01.js"
2
2

10.2. скрипти [import-02, export-02]

Ці скрипти демонструють експорт об’єкта з іменем.

Скрипт [export-02] має такий вигляд:


// експорт за замовчуванням об’єкта з іменем
const data = {
  data: 2,
  do() {
    console.log(this.data);
  }
};
// експорт
export default data;

рядок 9: експортується об’єкт [data];

Те, чи має експортований об’єкт ім’я, ніяк не впливає на процес імпорту. Скрипт [import-02] має такий вигляд:


'use strict';
// імпорт об’єкта, експортованого за замовчуванням
import module1 from './export-02';
// використання цього об’єкта
module1.do();
// експорт за замовчуванням можна імпортувати під будь-яким іменем
import module2 from './export-02';
console.log(module2.data);

Виконання


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\modules\import-02.js"
2
2

10.3. скрипти [import-03, export-03]

Один модуль може експортувати кілька елементів.

Скрипт [export-03] має такий вигляд:


// багатоекспорт
// експорт об’єкта
const data = {
  data: 2,
  do() {
    console.log(this.data);
  }
};
// функція експорту
export { data };
function doSomething() {
  console.log("doSomething");
}
export { doSomething };

Коментарі

рядки 10 і 14: експорт двох елементів. Експорт одного елемента здійснюється за допомогою синтаксису [export {élément}];

Скрипт [import-03] використовує модуль [export-03] наступним чином:


'use strict';
// імпорт модуля [export03]
import {data, doSomething} from './export-03';
// використання імпорту
data.do();
doSomething();
// інший варіант запису
import * as module from './export-03';
// використання імпорту
console.log(module.data);
module.doSomething();

рядок 3: [imports] створюються з точними назвами експортованих об’єктів;
рядок 8: можна імпортувати всі експортовані об’єкти в об’єкт із заданою назвою (у цьому випадку [module]);

Виконання


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\modules\import-03.js"
2
doSomething
{ data: 2, do: [Function: do] }
doSomething