Dieexport-Deklaration wird verwendet, um Werte aus einem JavaScript-Modul zu exportieren. Exportierte Werte können dann in andere Programme mit derimport-Deklaration oder durchdynamischen Import importiert werden. Der Wert einer importierten Bindung kann sich im Modul, das es exportiert, ändern — wenn ein Modul den Wert einer Bindung aktualisiert, die es exportiert, wird die Aktualisierung im importierten Wert sichtbar.

Um dieexport-Deklaration in einer Quelldatei zu verwenden, muss die Datei von der Laufzeit alsModul interpretiert werden. Dies wird in HTML durch das Hinzufügen vontype="module" zum<script>-Tag erreicht oder indem die Datei von einem anderen Modul importiert wird. Module werden automatisch imStrict Mode interpretiert.

Syntax

// Exporting declarationsexport let name1, name2/*, … */; // also varexport const name1 = 1, name2 = 2/*, … */; // also var, letexport function functionName() { /* … */ }export class ClassName { /* … */ }export function* generatorFunctionName() { /* … */ }export const { name1, name2: bar } = o;export const [ name1, name2 ] = array;// Export listexport { name1, /* …, */ nameN };export { variable1 as name1, variable2 as name2, /* …, */ nameN };export { variable1 as "string name" };export { name1 as default /*, … */ };// Default exportsexport default expression;export default function functionName() { /* … */ }export default class ClassName { /* … */ }export default function* generatorFunctionName() { /* … */ }export default function () { /* … */ }export default class { /* … */ }export default function* () { /* … */ }// Aggregating modulesexport * from "module-name";export * as name1 from "module-name";export { name1, /* …, */ nameN } from "module-name";export { import1 as name1, import2 as name2, /* …, */ nameN } from "module-name";export { default, /* …, */ } from "module-name";export { default as name1 } from "module-name";

nameN

Bezeichner, der exportiert werden soll (damit er überimport in einem anderen Skript importiert werden kann). Wenn Sie ein Alias mitas verwenden, kann der tatsächlich exportierte Name als Zeichenfolgenliteral angegeben werden, das möglicherweise kein gültiger Bezeichner ist.

Beschreibung

Jedes Modul kann zwei verschiedene Arten von Exporten haben:Named Export undDefault Export. Sie können mehrere Named Exports pro Modul haben, aber nur einen Default Export. Jeder Type entspricht einer der obigen Syntaxe.

Named Exports:

// export features declared elsewhereexport { myFunction2, myVariable2 };// export individual features (can export var, let,// const, function, class)export let myVariable = Math.sqrt(2);export function myFunction() {  // …}

Nach demexport-Schlüsselwort könnenlet-,const- undvar-Deklarationen sowie Funktions- oder Klassendeklarationen verwendet werden. Sie können auch dieexport { name1, name2 }-Syntax verwenden, um eine Liste von Namen zu exportieren, die anderswo deklariert wurden. Beachten Sie, dassexport {} kein leeres Objekt exportiert — es ist eine Nicht-Operation-Deklaration, die nichts exportiert (eine leere Namensliste).

Sie könnenexport nicht für eineusing- oderawait using-Deklaration verwenden. Sie können jedoch eine Variable exportieren, die anderswo mitusing oderawait using deklariert wurde. Dies wird jedoch dringend abgeraten, da die Variable entsorgt wird, sobald das Modul fertig ist, was dazu führt, dass alle Importeure einen schon entsorgten Wert erhalten.

export using resource1 = getResource(); // SyntaxError// Allowed by syntax but discouragedusing resource2 = getResource();export { resource2 };

Export-Deklarationen unterliegen nicht dentemporal dead zone-Regeln. Sie können deklarieren, dass das ModulX exportiert, bevor der NameX selbst deklariert ist.

export { x };const x = 1;// This works, because `export` is only a declaration, but doesn't// utilize the value of `x`.

Default Exports:

// export feature declared elsewhere as defaultexport { myFunction as default };// This is equivalent to:export default myFunction;// export individual features as defaultexport default function () { /* … */ }export default class { /* … */ }

Dieexport default-Syntax erlaubt jeden Ausdruck.

export default 1 + 1;

Als Spezialfall werden Funktionen und Klassen alsDeklarationen exportiert, nicht als Ausdrücke, und diese Deklarationen können anonym sein. Das bedeutet, dass Funktionen gehoben werden.

// Works because `foo` is a function declaration,// not a function expressionfoo();export default function foo() {  console.log("Hi");}// It's still technically a declaration, but it's allowed// to be anonymousexport default function () {  console.log("Hi");}

Named Exports sind nützlich, wenn Sie mehrere Werte exportieren müssen. Beim Import dieses Moduls müssen Named Exports mit genau dem gleichen Namen angesprochen werden (optional kann dieser mitas umbenannt werden), aber der Default-Export kann mit jedem beliebigen Namen importiert werden. Zum Beispiel:

// file test.jsconst k = 12;export default k;

// some other fileimport m from "./test"; // note that we have the freedom to use import m instead of import k, because k was default exportconsole.log(m); // 12

Sie können auch Named Exports umbenennen, um Namenskonflikte zu vermeiden:

export { myFunction as function1, myVariable as variable };

Sie können einen Namen in etwas umbenennen, das kein gültiger Bezeichner ist, indem Sie ein Zeichenfolgenliteral verwenden. Zum Beispiel:

export { myFunction as "my-function" };

Re-exporting / Aggregating

Ein Modul kann auch die von anderen Modulen exportierten Werte weiterleiten, ohne zwei separate Import/Export-Deklarationen schreiben zu müssen. Dies ist oft nützlich, wenn ein einzelnes Modul erstellt wird, das verschiedene Exporte aus verschiedenen Modulen bündelt (häufig als "Barrel-Modul" bezeichnet).

Dies kann mit der "export from"-Syntax erreicht werden:

export { default as function1, function2 } from "bar.js";

Dies ist vergleichbar mit einer Kombination aus Import und Export, außer dassfunction1 undfunction2 im aktuellen Modul nicht zur Verfügung stehen:

import { default as function1, function2 } from "bar.js";export { function1, function2 };

Die meisten der "import from"-Syntaxen haben "export from"-Gegenstücke.

export { x } from "mod";export { x as v } from "mod";export * as ns from "mod";

Es gibt auchexport * from "mod", obwohl es keinimport * from "mod" gibt. Dies exportiert alleNamed Exporte vonmod als Named Exporte des aktuellen Moduls weiter, aber der Default-Export vonmod wird nicht weiterexportiert. Wenn es zwei Wildcard-Export-Aussagen gibt, die denselben Namen implizit weiterexportieren, wird keiner von ihnen weiterexportiert.

// -- mod1.js --export const a = 1;// -- mod2.js --export const a = 3;// -- barrel.js --export * from "./mod1.js";export * from "./mod2.js";// -- main.js --import * as ns from "./barrel.js";console.log(ns.a); // undefined

Der Versuch, den doppelten Namen direkt zu importieren, wird einen Fehler verursachen.

import { a } from "./barrel.js";// SyntaxError: The requested module './barrel.js' contains conflicting star exports for name 'a'

Folgendes ist trotz der importäquivalenten Syntax syntaktisch ungültig:

export DefaultExport from "bar.js"; // Invalid

Der korrekte Weg, dies zu tun, ist der Export umzubenennen:

export { default as DefaultExport } from "bar.js";

Die "export from"-Syntax erlaubt es, dasas-Token wegzulassen, wodurch der Default-Export trotzdem als Default-Export weiterexportiert wird.

export { default, function2 } from "bar.js";

export from unterstützt alle Funktionen, dieimport unterstützt — beispielsweiseImportattribute:

export { default } from "./data.json" with { type: "json" };

Beispiele

Verwendung von Named Exports

In einem Modulmy-module.js könnten wir den folgenden Code einfügen:

// module "my-module.js"function cube(x) {  return x * x * x;}const foo = Math.PI + Math.SQRT2;const graph = {  options: {    color: "white",    thickness: "2px",  },  draw() {    console.log("From graph draw function");  },};export { cube, foo, graph };

Dann könnten wir im Top-Level-Modul, das in Ihre HTML-Seite eingebunden ist, Folgendes haben:

import { cube, foo, graph } from "./my-module.js";graph.options = {  color: "blue",  thickness: "3px",};graph.draw(); // Logs "From graph draw function"console.log(cube(3)); // 27console.log(foo); // 4.555806215962888

Beachten Sie Folgendes:

• Sie müssen dieses Skript in Ihrem HTML mit einem<script>-Element vomtype="module" einfügen, damit es als Modul erkannt und entsprechend behandelt wird.
• Sie können JS-Module nicht über einefile://-URL ausführen — Sie erhaltenCORS-Fehler. Sie müssen es über einen HTTP-Server laufen lassen.

Verwendung des Default-Exports

Wenn wir einen einzigen Wert exportieren möchten, der ein ganzes Modul darstellt, könnten wir einen Default-Export verwenden:

// module "cube.js"export default function cube(x) {  return x * x * x;}

Dann ist es in einem anderen Skript unkompliziert, den Default-Export zu importieren:

import cube from "./cube.js";console.log(cube(3)); // 27

Verwendung von "Export from"

Nehmen wir ein Beispiel, in dem wir die folgende Hierarchie haben:

• childModule1.js: ExportiertmyFunction undmyVariable
• childModule2.js: ExportiertMyClass
• parentModule.js: Fungiert als Aggregator (und tut sonst nichts)
• Top-Level-Modul: Konsumiert die Exporte vonparentModule.js

So würde es in Code-Snippets aussehen:

// In childModule1.jsfunction myFunction() {  console.log("Hello!");}const myVariable = 1;export { myFunction, myVariable };

// In childModule2.jsclass MyClass {  constructor(x) {    this.x = x;  }}export { MyClass };

// In parentModule.js// Only aggregating the exports from childModule1 and childModule2// to re-export themexport { myFunction, myVariable } from "childModule1.js";export { MyClass } from "childModule2.js";

// In top-level module// We can consume the exports from a single module since parentModule// "collected"/"bundled" them in a single sourceimport { myFunction, myVariable, MyClass } from "parentModule.js";

Spezifikationen

Browser-Kompatibilität

Siehe auch

• import
• JavaScript-Module Leitfaden
• ES6 in Depth: Modules auf hacks.mozilla.org (2015)
• ES modules: A cartoon deep-dive auf hacks.mozilla.org (2018)
• Exploring JS, Ch.16: Modules von Dr. Axel Rauschmayer