ECMAScript Module (ESM)

Eintrag zuletzt aktualisiert am: 05.11.2016


Unter Node.js hat sich bereits seit einiger Zeit ein Modulsystem basierend auf CommonJS (Common.js) etabliert, im Browser wird hingegen meist die Asynchronous Module Definition (AMD) für Abhängigkeiten und zum Laden von JavaScript-Dateien verwendet. Auch hier liefert ECMAScript 6 nun den längst überfälligen Standard, der sowohl das explizite Exportieren und das spezifische Importieren von Modulen, Klassen, Funktionen etc. erlaubt. Im Listing 1 (02_export.js) wird gezeigt, wie Variablen, Funktionen und Klassen exportiert werden. Als Besonderheit kann auch ein Standardexport definiert werden, dies wird durch das Schlüsselwort ‚default’ festgelegt.

Das Listing 2 zeigt, wie Variablen importiert werden und wie beim Import der Name des exportieren Symbols geändert wird (import {exportsymbole as neuername} from ...). Exportiert das Module ein Standard-Symbole (Variable, Klasse oder Funktion), können die geschweiften Klammern beim Import entfallen.

Listing 1: Export von Variablen, Funktionen und Klassen aus einem Modul
// exportieren von Variablen
export var firstname = "Martin";
export var lastname = "Möllenbeck";
export var position = "Geschäftsführer";

// exportieren von Funktionen
export var fkt = function(name) {

console.log("Hallo " + name);
};

// exportieren einer Klasse
export class MyClass {

}

// Standard-Export
export default function default_fkt() {
console.log("Standard-Funktion");
};

Listing 2: Unterschiedliche Formen des Import.

// Die Variablen 'firstname' und 'lastname' importieren
import {firstname, lastname} from './02_export';

console.log(firstname);
console.log(lastname);

// Die Funktion 'fkt' als 'hello_world' importieren und die Klasse
// mit dem exportierten Namen 'MyClass' importieren
import {fkt as helloworld, MyClass} from './02export';

hello_world("Welt");

let myClass = new MyClass();

// Default importieren
import defaultfkt from './02export';

default_fkt();