export

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since May 2018.

Die export-Deklaration wird verwendet, um Werte aus einem JavaScript-Modul zu exportieren. Exportierte Werte können dann in andere Programme mit der import-Deklaration oder dem dynamischen Import importiert werden. Der Wert einer importierten Bindung kann sich in dem Modul ändern, das ihn exportiert – wenn ein Modul den Wert einer Bindung aktualisiert, die es exportiert, ist die Änderung auch im importierten Wert sichtbar.

Um die export-Deklaration in einer Quelldatei zu verwenden, muss die Datei zur Laufzeit als Modul interpretiert werden. In HTML wird dies erreicht, indem dem <script>-Tag type="module" hinzugefügt wird, oder indem es von einem anderen Modul importiert wird. Module werden automatisch im Strict Mode interpretiert.

Syntax

js
// 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

Bezeichner, der exportiert werden soll (damit er über import in einem anderen Skript 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: named export und default export. Sie können mehrere benannte Exporte pro Modul haben, aber nur einen Standardexport. Jede Art entspricht einer der obigen Syntaxen.

Benannte Exporte:

js
// 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 export-Schlüsselwort können Sie let-, const- und var-Deklarationen sowie Funktions- oder Klassendeklarationen verwenden. Sie können auch die export { name1, name2 }-Syntax verwenden, um eine Liste von Namen zu exportieren, die anderswo deklariert wurden. Beachten Sie, dass export {} kein leeres Objekt exportiert – es ist eine No-Op-Deklaration, die nichts exportiert (eine leere Namensliste).

Export-Deklarationen unterliegen nicht den Regeln der zeitlichen Todeszone. Sie können deklarieren, dass das Modul X exportiert, bevor der Name X selbst deklariert wird.

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

Standardexporte:

js
// 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 { /* … */ }

Hinweis: Namen für Exportdeklarationen müssen eindeutig sein. Das Vorhandensein von Exporten mit doppelten Namen oder mehr als einem default-Export führt zu einem SyntaxError und verhindert, dass das Modul ausgewertet wird.

Die export default-Syntax erlaubt jeden Ausdruck.

js
export default 1 + 1;

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

js
// 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 (optional mit as umbenennen), aber der Standardexport kann mit beliebigem Namen importiert werden. Zum Beispiel:

js
// file test.js
const k = 12;
export default k;
js
// 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:

js
export { myFunction as function1, myVariable as variable };

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

js
export { myFunction as "my-function" };

Re-Exporting / Aggregieren

Ein Modul kann auch Werte, die aus anderen Modulen exportiert werden, "weiterleiten", ohne den Aufwand von zwei separaten Import-/Export-Deklarationen. Dies ist oft nützlich, wenn ein einzelnes Modul erstellt wird, das verschiedene Exporte aus verschiedenen Modulen konzentriert (oft als "Barrel-Modul" bezeichnet).

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

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

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

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

export { function1, function2 };

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

js
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. Dies re-exportiert alle benannten Exporte von mod als die benannten Exporte des aktuellen Moduls, aber der Standardexport von mod wird nicht erneut exportiert. Wenn es zwei Wildcard-Exportanweisungen gibt, die denselben Namen implizit re-exportieren, wird keiner von ihnen re-exportiert.

js
// -- 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, führt zu einem Fehler.

js
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:

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

Der korrekte Weg hierfür ist, den Export umzubenennen:

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

Die "export from"-Syntax ermöglicht es, das as-Token wegzulassen, wodurch der Standardexport immer noch als Standardexport re-exportiert wird.

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

export from unterstützt alle Funktionen, die import unterstützt — zum Beispiel Import-Attribute:

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

Beispiele

Verwenden von benannten Exporten

In einem Modul my-module.js könnten wir den folgenden Code einschließen:

js
// 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 im obersten Modul, das in Ihrer HTML-Seite enthalten ist, könnten wir haben:

js
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

Es ist wichtig, Folgendes zu beachten:

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

Verwenden des Standardexports

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

js
// module "cube.js"

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

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

js
import cube from "./cube.js";

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

Verwenden von export from

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

  • childModule1.js: exportiert myFunction und myVariable
  • childModule2.js: exportiert MyClass
  • parentModule.js: fungiert als Aggregator (und tut sonst nichts)
  • Oberstes Modul: konsumiert die Exporte von parentModule.js

So würde es mit Code-Schnipseln aussehen:

js
// In childModule1.js
function myFunction() {
  console.log("Hello!");
}
const myVariable = 1;
export { myFunction, myVariable };
js
// In childModule2.js
class MyClass {
  constructor(x) {
    this.x = x;
  }
}

export { MyClass };
js
// 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";
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

Specification
ECMAScript® 2026 Language Specification
# sec-exports

Browser-Kompatibilität

Siehe auch