Module: import und export

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());

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:

// 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"));

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());

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:

// 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"));

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