Module (import/export)

ES-Module (ESM) teilen Code in Dateien mit eigenem Gültigkeitsbereich auf. Was eine Datei nicht ausdrücklich exportiert, bleibt privat. Module laufen automatisch im Strict Mode und werden nur einmal ausgewertet, egal wie oft man sie importiert.

Benannte und Default-Exporte

Eine Datei kann beliebig viele benannte Exporte haben, aber höchstens einen Default-Export.

// math.js
export const PI = 3.14159;
export const add = (a, b) => a + b;
const secret = 42; // bleibt privat

export default function multiply(a, b) {
  return a * b;
}

Importieren

import multiply, { PI, add as sum } from './math.js';
import * as math from './math.js';

console.log(sum(2, 3));      // 5
console.log(math.PI);        // 3.14159
console.log(multiply(2, 4)); // 8

Importe sind Live-Bindings: Ändert das Quellmodul einen exportierten let-Wert, sieht das importierende Modul den neuen Wert. Selbst neu zuweisen kann es ihn aber nicht. Import-Deklarationen werden gehoistet und müssen auf oberster Ebene stehen.

Re-Exporte

So bündelt eine „Barrel“-Datei mehrere Module zu einer gemeinsamen Schnittstelle:

// index.js
export { add, PI } from './math.js';
export { default as multiply } from './math.js';
export * from './strings.js'; // ohne Default-Export!

Dynamischer Import

import() ist ein Ausdruck und hat als Rückgabewert ein Promise. Das eignet sich für Code-Splitting oder für Module, die nur unter bestimmten Bedingungen geladen werden sollen.

const loadChart = async () => {
  const { default: Chart } = await import('./chart.js');
  return new Chart('#canvas');
};

Im Browser und in Node.js

• Browser: Mit <script type="module" src="app.js"></script> wird das Skript automatisch verzögert (deferred) geladen.
• Node.js: Dateiendung .mjs verwenden oder "type": "module" in die package.json eintragen.
• Im Browser brauchen Pfade die Dateiendung. Paketnamen ohne Pfad wie 'lodash' funktionieren nur mit einer Import Map oder einem Bundler.
• Top-Level-await ist nur in Modulen erlaubt.

Tipp: Benannte Exporte sind meist die bessere Wahl. Sie machen Refactoring, Autovervollständigung und Tree-Shaking einfacher.