export

Syntax

// Exporting declarations
export let name1, name2/*, … */; // also var
export const name1 = 1, name2 = 2/*, … */; // also var, let
export function functionName() { /* … */ }
export class ClassName { /* … */ }
export function* generatorFunctionName() { /* … */ }
export const { name1, name2: bar } = o;
export const [ name1, name2 ] = array;

// Export list
export { name1, /* …, */ nameN };
export { variable1 as name1, variable2 as name2, /* …, */ nameN };
export { variable1 as "string name" };
export { name1 as default /*, … */ };

// Default exports
export default expression;
export default function functionName() { /* … */ }
export default class ClassName { /* … */ }
export default function* generatorFunctionName() { /* … */ }
export default function () { /* … */ }
export default class { /* … */ }
export default function* () { /* … */ }

// Aggregating modules
export * 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

Zu exportierender Bezeichner (damit er in einem anderen Skript über import importiert werden kann). Wenn Sie einen Alias mit as verwenden, kann der tatsächlich exportierte Name als String-Literal angegeben werden, das möglicherweise kein gültiger Bezeichner ist.

Beschreibung

Jedes Modul kann zwei verschiedene Arten von Exporten haben: benannte Exporte und Standardexporte. Sie können mehrere benannte Exporte pro Modul, aber nur einen Standardexport haben. Jeder Typ entspricht einer der oben genannten Syntaxformen.

Benannte Exporte:

// export features declared elsewhere
export { myFunction2, myVariable2 };

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

Nach dem Schlüsselwort export können Sie let-, const- und var-Deklarationen sowie Funktions- oder Klassendeklarationen verwenden. Sie können auch die Syntax export { name1, name2 } verwenden, um eine Liste von an anderer Stelle deklarierten Namen zu exportieren. Beachten Sie, dass export {} kein leeres Objekt exportiert — es ist eine No-Op-Deklaration, die nichts exportiert (eine leere Namensliste).

Sie können export nicht für eine using- oder await using-Deklaration verwenden. Sie können jedoch eine Variable exportieren, die an anderer Stelle mit using oder await using deklariert wurde. Davon wird dennoch dringend abgeraten, da die Variable verworfen wird, sobald das Modul die Ausführung beendet, wodurch alle Importierenden einen bereits verworfenen Wert erhalten.

export using resource1 = getResource(); // SyntaxError

// Allowed by syntax but discouraged
using resource2 = getResource();
export { resource2 };

Exportdeklarationen unterliegen nicht den Regeln der Temporal Dead Zone. Sie können deklarieren, dass das Modul X exportiert, bevor der Name X selbst deklariert wird.

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

Standardexporte:

// export feature declared elsewhere as default
export { myFunction as default };
// This is equivalent to:
export default myFunction;

// export individual features as default
export default function () { /* … */ }
export default class { /* … */ }

Die Syntax export default erlaubt jeden beliebigen Ausdruck.

export default 1 + 1;

Als Sonderfall werden Funktionen und Klassen als Deklarationen und nicht als Ausdrücke exportiert; diese Deklarationen können anonym sein. Das bedeutet, dass Funktionen gehisst werden.

// Works because `foo` is a function declaration,
// not a function expression
foo();

export default function foo() {
  console.log("Hi");
}

// It's still technically a declaration, but it's allowed
// to be anonymous
export default function () {
  console.log("Hi");
}

Benannte Exporte sind nützlich, wenn Sie mehrere Werte exportieren müssen. Beim Importieren dieses Moduls müssen benannte Exporte mit genau demselben Namen referenziert werden (wobei sie optional mit as umbenannt werden können), aber der Standardexport kann unter jedem beliebigen Namen importiert werden. Beispiel:

// file test.js
const k = 12;
export default k;

// some other file
import m from "./test"; // note that we have the freedom to use import m instead of import k, because k was default export

console.log(m); // 12

Sie können benannte Exporte auch umbenennen, um Namenskonflikte zu vermeiden:

export { myFunction as function1, myVariable as variable };

Sie können einen Namen mithilfe eines String-Literals in etwas umbenennen, das kein gültiger Bezeichner ist. Beispiel:

export { myFunction as "my-function" };

Re-Exportieren / Aggregieren

Ein Modul kann auch Werte, die aus anderen Modulen exportiert wurden, „weiterleiten“, ohne dass zwei separate Import-/Export-Anweisungen geschrieben werden müssen. Dies ist häufig nützlich, wenn ein einzelnes Modul erstellt wird, das verschiedene Exporte aus verschiedenen Modulen zusammenfasst (üblicherweise als „Barrel-Modul“ bezeichnet).

Dies kann mit der Syntax „export from“ erreicht werden:

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

Dies ist mit einer Kombination aus Import und Export vergleichbar, außer dass function1 und function2 im aktuellen Modul nicht verfügbar werden:

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

export { function1, function2 };

Die meisten Syntaxformen von „import from“ haben Entsprechungen als „export from“.

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

Es gibt auch export * from "mod", obwohl es kein import * from "mod" gibt. Dadurch werden alle benannten Exporte aus mod als benannte Exporte des aktuellen Moduls re-exportiert, der Standardexport von mod wird jedoch nicht re-exportiert. Wenn zwei Wildcard-Exportanweisungen implizit denselben Namen re-exportieren, wird keiner von beiden re-exportiert.

// -- 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, löst einen Fehler aus.

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

Das Folgende ist trotz seines Import-Äquivalents syntaktisch ungültig:

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

Die korrekte Vorgehensweise ist, den Export umzubenennen:

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

Die Syntax „export from“ erlaubt das Weglassen des Tokens as, wodurch der Standardexport weiterhin als Standardexport re-exportiert wird.

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

export from unterstützt alle Funktionen, die auch import unterstützt — beispielsweise Importattribute:

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

Beispiele

Benannte Exporte verwenden

In einem Modul my-module.js könnten wir 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 obersten Modul, das in Ihrer 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)); // 27
console.log(foo); // 4.555806215962888

Folgendes sollte unbedingt beachtet werden:

• Sie müssen dieses Skript in Ihrem HTML mit einem <script>-Element vom Typ type="module" einbinden, damit es als Modul erkannt und entsprechend behandelt wird.
• Sie können JS-Module nicht über eine file://-URL ausführen — Sie erhalten CORS-Fehler. Sie müssen sie über einen HTTP-Server ausführen.

Den Standardexport verwenden

Wenn wir einen einzelnen Wert exportieren möchten, der ein ganzes Modul repräsentiert, könnten wir einen Standardexport verwenden:

// module "cube.js"

export default function cube(x) {
  return x * x * x;
}

Dann ist es in einem anderen Skript einfach, den Standardexport zu importieren:

import cube from "./cube.js";

console.log(cube(3)); // 27

Export from verwenden

Betrachten wir ein Beispiel mit der folgenden Hierarchie:

• childModule1.js: exportiert myFunction und myVariable
• childModule2.js: exportiert MyClass
• parentModule.js: fungiert als Aggregator (und macht nichts anderes)
• Modul der obersten Ebene: verwendet die Exporte von parentModule.js

So würde dies mit Codeausschnitten aussehen:

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

// In childModule2.js
class MyClass {
  constructor(x) {
    this.x = x;
  }
}

export { MyClass };

// In parentModule.js
// Only aggregating the exports from childModule1 and childModule2
// to re-export them
export { 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 source
import { myFunction, myVariable, MyClass } from "parentModule.js";

Spezifikationen

Browser-Kompatibilität

Siehe auch

• import
• Leitfaden zu JavaScript-Modulen
• ES6 im Detail: Module auf hacks.mozilla.org (2015)
• ES-Module: Ein tiefer Einblick als Comic auf hacks.mozilla.org (2018)