ESM-Grundlagen – import/export, default vs. named

Was ist ein Modul?

Modul = Datei + lokaler Gültigkeitsbereich

// A module is just a file with its own scope
// Here we simulate "module scope" by keeping variables local.
(function () {
  const secret = 42;                          // local to this file/scope
  function reveal() { return "value:" + secret; }
  console.log("module-like scope:", typeof secret === "number", reveal());
})();

Benannte Exporte — Grundidee

// Named exports: you export multiple items by name
const exampleNamedExport = [
  "export const PI = 3.14;",
  "export function sum(a, b) { return a + b; }",
  "import { PI, sum } from \\"./math.js\\";"
];

console.log("named export example:");
for (const line of exampleNamedExport) console.log(line);

// Tiny emulation: pretend we imported two named symbols
const PI = 3.14;
function sum(a, b) { return a + b; }
console.log("emulated use:", PI, sum(2, 3));

Standardexport — Grundidee

// Default export: each module can have at most one default
const exampleDefault = [
  "export default function greet(name) { return \\"Hi \\" + name; }",
  "import greet from \\"./greet.js\\"; // no braces"
];

console.log("default export example:");
for (const line of exampleDefault) console.log(line);

// Emulation of default import usage
function greet(name) { return "Hi " + name; }
console.log("emulated default:", greet("Ayla"));

Namespace-Import

// Namespace import collects all named exports under one object
const exampleNamespace = [
  "import * as math from \\"./math.js\\";",
  "console.log(math.PI, math.sum(1, 2));"
];

console.log("namespace import example:");
for (const line of exampleNamespace) console.log(line);

// Emulate a namespace object
const math = { PI: 3.14, sum: function (a, b) { return a + b; } };
console.log("namespace use:", math.PI, math.sum(4, 5));

CJS-Vergleich und Hinweise zur Auflösung

Quiz zu benannten und Standardimporten

Zusammenfassung