10. Die Module ES6

Mit den Modulen ES6 lassen sich JavaScript-Anwendungen erstellen, die in unabhängige und wiederverwendbare Module gegliedert sind.

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

Das Skript [import-01] verwendet das Modul [export-01]. Dieses ist wie folgt definiert:


// Standardmäßiger Export eines unbenannten Objekts
export default {
  data: 2,
  do() {
    console.log(this.data);
  }
};

Kommentare

Die Zeilen [2-7] definieren ein unbenanntes Objekt mit den Eigenschaften [data, do];
Zeile 2: Die Anweisung [export default] exportiert dieses Objekt. Es kann somit importiert werden;

Das Modul [export-01] wird vom Skript [import-01] wie folgt verwendet:


'„use strict“;
// Import eines standardmäßig exportierten Objekts
import export01 from './export-01';
// Verwendung dieses Objekts
export01.do();
// Ein Standardexport kann unter einem beliebigen Namen importiert werden
import data from './export-01';
console.log(data.data);

Kommentare

In den Zeilen 3 und 7 wird das standardmäßig vom Modul [export-01] exportierte Objekt unter zwei verschiedenen Namen importiert;
Sobald ein Objekt importiert wurde, kann es so verwendet werden, als wäre es lokal im Skript definiert worden;

Ausführung


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

Diese Skripte zeigen den Export eines benannten Objekts.

Das Skript [export-02] lautet wie folgt:


// Standard-Export eines benannten Objekts
const data = {
  data: 2,
  do() {
    console.log(this.data);
  }
};
// Export
export default data;

Zeile 9: Das Objekt [data] wird exportiert;

Ob das exportierte Objekt benannt ist oder nicht, hat keinen Einfluss auf den Importvorgang. Das Skript [import-02] lautet wie folgt:


'use strict';
// Import eines standardmäßig exportierten Objekts
import module1 from './export-02';
// Verwendung dieses Objekts
module1.do();
// Ein Standardexport kann unter einem beliebigen Namen importiert werden
import module2 from './export-02';
console.log(module2.data);

Ausführung


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

Ein Modul kann mehrere Elemente exportieren.

Das Skript [export-03] lautet wie folgt:


// Mehrfach-Exporte
// Objekt exportieren
const data = {
  data: 2,
  do() {
    console.log(this.data);
  }
};
// Funktionsexport
export { data };
function doSomething() {
  console.log("doSomething");
}
export { doSomething };

Anmerkungen

Zeilen 10 und 14: Export von zwei Elementen. Der Export eines Elements erfolgt mit der Syntax [export {élément}];

Das Skript [import-03] nutzt das Modul [export-03] wie folgt:


'use strict';
// Import eines Moduls [export03]
import {data, doSomething} from './export-03';
// Verwendung der Importe
data.do();
doSomething();
// andere Schreibweise
import * as module from './export-03';
// Verwendung des Imports
console.log(module.data);
module.doSomething();

Zeile 3: Die [imports]-Befehle werden mit den genauen Namen der exportierten Objekte ausgeführt;
Zeile 8: Man kann alle exportierten Objekte in ein benanntes Objekt (hier [module]) importieren;

Ausführung


[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