JavaScript: Module: import und export

Kurz: Größere Programme teilst du in mehrere Dateien auf. ES-Module (ESM) sind der Standard dafür: Jede Datei hat ihren eigenen Gültigkeitsbereich und gibt gezielt etwas frei.

Teil des Kurses JavaScript

Kapitel 23 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Größere Programme teilst du in mehrere Dateien auf. ES-Module (ESM) sind der Standard dafür: Jede Datei hat ihren eigenen Gültigkeitsbereich und gibt gezielt etwas frei.

Exportieren

// mathe.js
export const PI = 3.14159;
 
export function quadrat(x) {
  return x * x;
}
 
export class Rechner {
  addiere(a, b) { return a + b; }
}
 
const geheim = 42;            // nicht exportiert: von außen unsichtbar
 
export default function hauptfunktion() {   // genau ein Default-Export pro Datei
  return "Standard";
}

Importieren

// app.js
import hauptfunktion, { PI, quadrat, Rechner } from "./mathe.js";
import { quadrat as hoch2 } from "./mathe.js";     // umbenennen
import * as mathe from "./mathe.js";               // alles als Objekt
 
console.log(PI, quadrat(3), mathe.PI, hauptfunktion());

Schreibweise	Bedeutung
export const x	benannter Export
export default x	Standard-Export (Import ohne { })
import { x } from "./datei.js"	benannter Import
import x from "./datei.js"	Default-Import
import * as m from "./datei.js"	Namensraum-Import
import "./datei.js"	nur ausführen

Pfade zu eigenen Dateien beginnen mit ./ oder ../ und brauchen im Browser die Endung .js.

Module im Browser

<script type="module" src="app.js"></script>

Module werden automatisch im strikten Modus ausgeführt, sind erst nach dem Laden der Seite aktiv und laufen nur über http(s), nicht direkt per file://.

Module in Node.js

Node.js kennt zwei Systeme:

	ES-Module	CommonJS (älter)
Syntax	import / export	require() / module.exports
Aktivieren	.mjs oder "type": "module" in package.json	Standard bei .js/.cjs

// CommonJS
const fs = require("fs");
module.exports = { quadrat };

Neue Projekte nutzen am besten ES-Module.

Dynamischer Import

Mit import() lädst du ein Modul erst bei Bedarf (liefert ein Promise):

async function ladeMath() {
  const { default: os } = await import("node:os");
  return typeof os.platform();
}
ladeMath().then(console.log).catch(() => console.log("im Browser nicht verfügbar"));

Ausgabe:

string

Das spart Ladezeit bei selten genutzten Funktionen (Lazy Loading).

Gut zu wissen

• Module werden nur einmal geladen und ausgeführt, egal wie oft sie importiert werden
• Zirkuläre Importe vermeiden
• Ein Modul pro Aufgabe; Datei und Inhalt nach dem benennen, was sie tun
• index.js fasst oft mehrere Module zusammen (export * from "./a.js")
• Mit Werkzeugen wie Vite, esbuild oder webpack bündelst du Module für den Browser

Exportieren

// mathe.js
export const PI = 3.14159;
 
export function quadrat(x) {
  return x * x;
}
 
export class Rechner {
  addiere(a, b) { return a + b; }
}
 
const geheim = 42;            // nicht exportiert: von außen unsichtbar
 
export default function hauptfunktion() {   // genau ein Default-Export pro Datei
  return "Standard";
}

Importieren

// app.js
import hauptfunktion, { PI, quadrat, Rechner } from "./mathe.js";
import { quadrat as hoch2 } from "./mathe.js";     // umbenennen
import * as mathe from "./mathe.js";               // alles als Objekt
 
console.log(PI, quadrat(3), mathe.PI, hauptfunktion());

Schreibweise	Bedeutung
export const x	benannter Export
export default x	Standard-Export (Import ohne { })
import { x } from "./datei.js"	benannter Import
import x from "./datei.js"	Default-Import
import * as m from "./datei.js"	Namensraum-Import
import "./datei.js"	nur ausführen

Pfade zu eigenen Dateien beginnen mit ./ oder ../ und brauchen im Browser die Endung .js.

Module im Browser

<script type="module" src="app.js"></script>

Module werden automatisch im strikten Modus ausgeführt, sind erst nach dem Laden der Seite aktiv und laufen nur über http(s), nicht direkt per file://.

Module in Node.js

Node.js kennt zwei Systeme:

	ES-Module	CommonJS (älter)
Syntax	import / export	require() / module.exports
Aktivieren	.mjs oder "type": "module" in package.json	Standard bei .js/.cjs

// CommonJS
const fs = require("fs");
module.exports = { quadrat };

Neue Projekte nutzen am besten ES-Module.

Dynamischer Import

Mit import() lädst du ein Modul erst bei Bedarf (liefert ein Promise):

async function ladeMath() {
  const { default: os } = await import("node:os");
  return typeof os.platform();
}
ladeMath().then(console.log).catch(() => console.log("im Browser nicht verfügbar"));

Ausgabe:

string

Das spart Ladezeit bei selten genutzten Funktionen (Lazy Loading).

Gut zu wissen

• Module werden nur einmal geladen und ausgeführt, egal wie oft sie importiert werden
• Zirkuläre Importe vermeiden
• Ein Modul pro Aufgabe; Datei und Inhalt nach dem benennen, was sie tun
• index.js fasst oft mehrere Module zusammen (export * from "./a.js")
• Mit Werkzeugen wie Vite, esbuild oder webpack bündelst du Module für den Browser

Merke

• export gibt frei, import holt ins Modul
• Pro Datei ein Default-Export, beliebig viele benannte Exporte
• Im Browser <script type="module">
• Node.js: ESM (import) oder CommonJS (require)
• import() lädt dynamisch bei Bedarf

Übungsaufgabe

Teile ein kleines Programm in zwei Dateien: Eine exportiert Hilfsfunktionen, die andere importiert und nutzt sie.

Quiz zur Selbstkontrolle

Wie gibst du eine Funktion aus einem Modul frei?

• export function f() {} (richtig)
• public function f() {}
• module.free f
• include f

Wie viele Default-Exporte darf ein Modul haben?

• Einen (richtig)
• Beliebig viele
• Keinen
• Zwei

Wie bindest du ein Modul im Browser ein?

• <script type=“module” src=“app.js”> (richtig)
• <script import=“app.js”>
• <module src=“app.js”>
• <script src=“app.js” async-module>

Weiter im Kurs

Zurück: Fehlerbehandlung

Weiter: Iteratoren und Generatoren

Alle Kapitel: JavaScript im Überblick