ESM-Module: import / export

Wenn ein Programm wächst, wird es unpraktisch, alles in einer einzigen Datei zu halten. Modernes JavaScript löst dieses Problem mit ES-Modulen (ESM): Jede Datei ist ein Modul, das Funktionen, Konstanten oder Klassen exportieren kann, und andere Dateien können diese importieren.

export

Du exportierst das, was du öffentlich machen willst. Zwei Formen:

// somma.js
export function somma(a, b) {
  return a + b;
}

export const PI = 3.14159;

Oder am Ende der Datei:

function somma(a, b) {
  return a + b;
}
const PI = 3.14159;
export { somma, PI };

import

Aus einer anderen Datei:

// app.js
import { somma, PI } from './somma.js';

console.log(somma(1, 2)); // 3
console.log(PI); // 3.14159

Das Objekt { somma, PI } ist die Liste der Namen, die du importieren möchtest. Sie müssen mit den exportierten Namen übereinstimmen.

Default-Export

Jedes Modul kann einen namenlosen Haupt-Export haben:

// log.js
export default function log(msg) {
  console.log('[app]', msg);
}

Beim Importieren wählt man den lokalen Namen selbst:

import log from './log.js';
log('ciao');

Umbenennen

import { somma as plus } from './somma.js';
export { somma as add } from './somma.js'; // re-export

Ein einziger „Namespace“ pro Datei

Module sind isoliert: Eine in einer Datei deklarierte Variable landet nicht im globalen Namensraum. Du musst sie explizit exportieren, damit sie an anderer Stelle sichtbar wird. Dies ist eine enorme Verbesserung gegenüber dem alten JS, bei dem sich jedes <script>-Tag das window-Objekt teilte.

Probier es aus

In den folgenden Übungen wirst du keine echte import/export-Syntax schreiben – die Sandbox besteht aus einer einzigen Datei. Stattdessen bitten wir dich, den Code in kleine, separate Funktionen aufzuteilen, die zusammenarbeiten, so wie du es tun würdest, wenn sich jede in einer eigenen Datei befände.

Wiederholungsübung