10. Moduły ES6

Moduły ES6 umożliwiają tworzenie aplikacji JavaScript zorganizowanych w postaci niezależnych i wielokrotnego użytku modułów.

10.1. Skrypty [import-01, export-01]

Skrypt [import-01] będzie korzystał z modułu [export-01]. Jest on zdefiniowany w następujący sposób:


// domyślny eksport obiektu bez nazwy
export default {
  data: 2,
  do() {
    console.log(this.data);
  }
};

Komentarze

wiersze [2-7] definiują obiekt bez nazwy z właściwościami [data, do];
wiersz 2: instrukcja [export default] eksportuje ten obiekt. Dzięki temu będzie można go zaimportować;

Moduł [export-01] jest wykorzystywany przez skrypt [import-01] w następujący sposób:


'„use strict”;
// import obiektu eksportowanego domyślnie
import export01 from './export-01';
// użycie tego obiektu
export01.do();
// domyślny eksport można zaimportować pod dowolną nazwą
import data from './export-01';
console.log(data.data);

Komentarze

w wierszach 3 i 7 importowany jest domyślnie eksportowany obiekt z modułu [export-01] pod dwiema różnymi nazwami;
po zaimportowaniu obiektu można z niego korzystać tak, jakby został zdefiniowany lokalnie w skrypcie;

Wykonanie


[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. skrypty [import-02, export-02]

Skrypty te przedstawiają eksport obiektu o określonej nazwie.

Skrypt [export-02] ma następującą postać:


// domyślny eksport obiektu o nazwie
const data = {
  data: 2,
  do() {
    console.log(this.data);
  }
};
// eksport
export default data;

wiersz 9: eksportujemy obiekt [data];

To, czy eksportowany obiekt ma nazwę, czy nie, nie ma wpływu na operację importu. Skrypt [import-02] wygląda następująco:


'use strict';
// import obiektu wyeksportowanego domyślnie
import module1 from './export-02';
// użycie tego obiektu
module1.do();
// domyślny eksport można zaimportować pod dowolną nazwą
import module2 from './export-02';
console.log(module2.data);

Wykonanie


[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. skrypty [import-03, export-03]

Moduł może eksportować wiele elementów.

Skrypt [export-03] ma następującą treść:


// wiele eksportów
// eksport obiektu
const data = {
  data: 2,
  do() {
    console.log(this.data);
  }
};
// funkcja eksportu
export { data };
function doSomething() {
  console.log("doSomething");
}
export { doSomething };

Komentarze

wiersze 10 i 14: eksport dwóch elementów. Eksport jednego elementu odbywa się przy użyciu składni [export {élément}];

Skrypt [import-03] wykorzystuje moduł [export-03] w następujący sposób:


'use strict';
// import modułu [export03]
import {data, doSomething} from './export-03';
// korzystanie z importów
data.do();
doSomething();
// inna forma zapisu
import * as module from './export-03';
// użycie importu
console.log(module.data);
module.doSomething();

wiersz 3: skrypty [imports] są tworzone z dokładnymi nazwami eksportowanych obiektów;
wiersz 8: można zaimportować wszystkie wyeksportowane obiekty do obiektu o określonej nazwie (w tym przypadku [module]);

Wykonanie


[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