Signatur
Beschreibung
Die import-Anweisung ist der Einstiegspunkt in das native ES-Modul-System (ESM). Mit ihr können Bezeichner, die in einem anderen Modul über export veröffentlicht wurden, in das aktuelle Modul geladen werden. Importierte Bindungen sind schreibgeschützt (read-only) aus Sicht des importierenden Moduls — das exportierende Modul kann ihren Wert jedoch weiterhin verändern, und die Änderung ist sofort sichtbar (daher Live-Binding).
Es gibt mehrere Import-Formen: Named Imports (import { foo, bar } from '...'), Default Import (import myDefault from '...'), Namespace Import (import * as ns from '...') sowie deren Kombination. Außerdem existiert der reine Side-Effect-Import (import '...'), der ein Modul ausführt, ohne Bindungen zu importieren.
Statische import-Deklarationen müssen sich auf der obersten Ebene eines Moduls befinden (nicht innerhalb von Funktionen, Blöcken oder Bedingungen) und werden bereits beim Parsen aufgelöst — bevor Code ausgeführt wird. Dadurch ermöglichen sie statische Analyse, Tree-Shaking und zirkuläre Abhängigkeitserkennung durch Bundler wie Webpack oder Rollup. Für bedingte oder verzögerte Ladevorgänge steht der dynamische import()-Ausdruck zur Verfügung.
Das Modul, das import verwendet, muss selbst als Modul behandelt werden — im Browser durch das Attribut <script type="module">, in Node.js entweder über die Dateiendung .mjs oder durch "type": "module" in der package.json.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $binding(s) Pflicht | Identifier | { [localName as] exportedName } | * as Namespace | default | — | Die zu importierenden Bezeichner. Kann ein Named Binding ({ foo }), ein Alias ({ foo as bar }), ein Default Import (myDefault), ein Namespace-Objekt (* as ns) oder eine Kombination davon sein. Wird komplett weggelassen, handelt es sich um einen Side-Effect-Import. |
| $module-specifier Pflicht | string | — | Ein statischer String-Literal (kein Ausdruck), der den Pfad oder den Bezeichner des zu importierenden Moduls angibt — z. B. './utils.js', '../config.js' oder ein Paketname wie 'lodash' (Node.js / Bundler). Im Browser muss der Specifier eine vollständige URL oder ein relativer Pfad sein. |
Rückgabewert
import-Deklaration ist eine Anweisung und hat keinen Rückgabewert. Die importierten Bindungen stehen nach der Deklaration im Modul-Scope zur Verfügung.Beispiele
Named Imports, Default Import und Alias
// math.js (exportierendes Modul)
export const PI = 3.14159;
export const add = (a, b) => a + b;
export default function multiply(a, b) { return a * b; }
// main.js (importierendes Modul)
import multiply, { PI, add as sum } from './math.js';
console.log(PI); // 3.14159
console.log(sum(2, 3)); // 5
console.log(multiply(4, 5)); // 20Namespace Import
// helpers.js
export const greet = name => `Hallo, ${name}!`;
export const farewell = name => `Tschüss, ${name}!`;
// app.js
import * as helpers from './helpers.js';
console.log(helpers.greet('Welt')); // Hallo, Welt!
console.log(helpers.farewell('Welt')); // Tschüss, Welt!Side-Effect-Import (nur Ausführung)
// polyfill.js — registriert globale Polyfills, exportiert nichts
// (Datei-Inhalt: Array.prototype.at ??= function(...) { ... })
// main.js
import './polyfill.js'; // Modul wird ausgeführt, keine Bindungen importiert
console.log([1, 2, 3].at(-1)); // 3Live-Binding-Verhalten
// counter.js
export let count = 0;
export const increment = () => { count++; };
// app.js
import { count, increment } from './counter.js';
console.log(count); // 0
increment();
increment();
console.log(count); // 2 ← Live-Binding: aktueller Wert des Exports// Wichtig · Fallstricke
Nur in Modulen erlaubt: Statische import-Deklarationen funktionieren ausschließlich in ES-Modulen. Im Browser benötigt das einbindende <script>-Tag das Attribut type="module"; andernfalls wird ein SyntaxError ausgelöst.
- Hoisting: Importierte Bindungen werden gehoisted und bereits vor der ersten Zeile des Moduls aufgelöst, ähnlich wie
let— jedoch ohne die Temporal Dead Zone (TDZ), da das Modul-System die Ausführungsreihenfolge garantiert. - Schreibschutz: Der Versuch, eine importierte Bindung direkt neu zuzuweisen (
PI = 4), führt zu einemTypeError. Mutationen sind nur über Funktionen des exportierenden Moduls möglich. - Zirkuläre Abhängigkeiten: ESM unterstützt zirkuläre Imports, allerdings können Bindungen beim ersten Zugriff noch
undefinedsein, wenn die Initialisierung noch nicht abgeschlossen ist. Sorgfalt ist geboten. - Import Maps (Browser): Mit
<script type="importmap">können bare specifiers (z. B.'lodash') im Browser auf konkrete URLs gemappt werden, ohne Bundler. - Dynamisches Laden: Für laufzeitbedingte oder lazy-geladene Module steht
import()(dynamischer Import) zur Verfügung, der einPromisezurückgibt.