JavaScript
Module

Syntax

• defaultMember aus 'Modul' importieren;
• importiere {memberA, memberB, ...} aus 'Modul';
• * als Modul aus 'Modul' importieren;
• importiere {memberA als, memberB, ...} von 'module';
• defaultMember importieren, * als Modul aus 'Modul';
• import defaultMember, {moduleA, ...} von 'module';
• Import 'Modul';

Bemerkungen

Standardexporte

Neben benannten Importen können Sie einen Standardexport bereitstellen.

// circle.js
export const PI = 3.14;
export default function area(radius) {
    return PI * radius * radius;
}

Sie können eine vereinfachte Syntax verwenden, um den Standardexport zu importieren.

import circleArea from './circle';
console.log(circleArea(4));

Beachten Sie, dass ein Standardexport implizit einem benannten Export mit dem Namen default und dass die importierte Bindung (oben circleArea ) lediglich ein Alias ​​ist. Das vorherige Modul kann wie geschrieben werden

import { default as circleArea } from './circle';
console.log(circleArea(4));

Sie können pro Modul nur einen Standardexport haben. Der Name des Standardexports kann weggelassen werden.

// named export: must have a name
export const PI = 3.14;

// default export: name is not required
export default function (radius) {  
    return PI * radius * radius;
}

Importieren mit Nebenwirkungen

Manchmal haben Sie ein Modul, das Sie nur importieren möchten, damit der Code der obersten Ebene ausgeführt wird. Dies ist nützlich für Polyfills, andere Globals oder Konfigurationen, die nur einmal ausgeführt werden, wenn Ihr Modul importiert wird.

Gegeben eine Datei mit dem Namen test.js :

console.log('Initializing...')

Sie können es so verwenden:

import './test'

In diesem Beispiel wird Initializing... an die Konsole gedruckt.

Modul definieren

In ECMAScript 6 wird jede Datei bei Verwendung der Modulsyntax ( import / export ) zu einem eigenen Modul mit einem privaten Namespace. Funktionen und Variablen der obersten Ebene verunreinigen den globalen Namespace nicht. Um Funktionen, Klassen und Variablen für andere zu importierende Module verfügbar zu machen, können Sie das Schlüsselwort export .

// not exported
function somethingPrivate() {
    console.log('TOP SECRET')
}


export const PI = 3.14;

export function doSomething() {
    console.log('Hello from a module!')
}

function doSomethingElse(){ 
    console.log("Something else")
}

export {doSomethingElse}

export class MyClass {
    test() {}
}

Hinweis: Über <script> -Tags geladene ES5-JavaScript-Dateien bleiben unverändert, wenn Sie import / export nicht verwenden.

Nur die explizit exportierten Werte stehen außerhalb des Moduls zur Verfügung. Alles andere kann als privat oder unzugänglich angesehen werden.

Das Importieren dieses Moduls würde (unter der Annahme, dass sich der vorherige Codeblock in my-module.js ) ergeben:

import * as myModule from './my-module.js';

myModule.PI;                 // 3.14
myModule.doSomething();      // 'Hello from a module!'
myModule.doSomethingElse();  // 'Something else'
new myModule.MyClass();      // an instance of MyClass
myModule.somethingPrivate(); // This would fail since somethingPrivate was not exported

Benannte Mitglieder aus einem anderen Modul importieren

Da das Modul aus dem Abschnitt Defining a Module in der Datei test.js , können Sie dieses Modul importieren und seine exportierten Member verwenden:

import {doSomething, MyClass, PI} from './test'

doSomething()

const mine = new MyClass()
mine.test()

console.log(PI)

Die somethingPrivate() Methode wurde nicht aus dem test exportiert. Der Import schlägt fehl:

import {somethingPrivate} from './test'

somethingPrivate()

Ein gesamtes Modul importieren

Neben dem Importieren benannter Member aus einem Modul oder einem Standardexport eines Moduls können Sie auch alle Member in eine Namespace-Bindung importieren.

import * as test from './test'

test.doSomething()

Alle exportierten Member sind jetzt für die test verfügbar. Nicht exportierte Mitglieder sind nicht verfügbar, ebenso wie sie bei Importen mit benannten Mitgliedern nicht verfügbar sind.

Hinweis: Der Pfad zum Modul './test' wird vom Loader aufgelöst und wird nicht von der ECMAScript-Spezifikation abgedeckt. Dies kann eine Zeichenfolge für eine beliebige Ressource sein (ein relativer oder absoluter Pfad) in einem Dateisystem, eine URL für eine Netzwerkressource oder eine andere Zeichenfolge-ID).

Benannte Member mit Aliasnamen importieren

Manchmal thisIsWayTooLongOfAName() Sie möglicherweise auf Mitglieder mit wirklich langen Mitgliedsnamen, z. B. thisIsWayTooLongOfAName() . In diesem Fall können Sie das Mitglied importieren und ihm einen kürzeren Namen geben, der in Ihrem aktuellen Modul verwendet werden soll:

import {thisIsWayTooLongOfAName as shortName} from 'module'

shortName()

Sie können mehrere lange Mitgliedsnamen wie folgt importieren:

import {thisIsWayTooLongOfAName as shortName, thisIsAnotherLongNameThatShouldNotBeUsed as otherName} from 'module'

shortName()
console.log(otherName)

Schließlich können Sie Import-Aliase mit dem normalen Member-Import mischen:

import {thisIsWayTooLongOfAName as shortName, PI} from 'module'

shortName()
console.log(PI)

Mehrere benannte Mitglieder exportieren

const namedMember1 = ...
const namedMember2 = ...
const namedMember3 = ...

export { namedMember1, namedMember2, namedMember3 }