// I3.2 · ca. 34 Min. · Aufbau

Benannte und Default-Exporte, as und import *

Nach dieser Lektion wählen Sie zwischen benannten Exporten und einem Default-Export, importieren beide richtig, benennen mit as um und bauen ein Index-Modul, das andere Module bündelt.

Lektion 2 von 5 in I3 Module, Node.js und npm

Zurück Weiter

Danach können Sie

Zwischen benannten Exporten und einem Default-Export wählen und jeden mit der passenden Syntax importieren
Mit as umbenennen und ein ganzes Modul mit import * as als Namespace-Objekt importieren
Mehrere Module mit export … from in einer Index-Datei bündeln und wissen, dass export * den Default auslässt

Aufwärmen · Aufgabe 1 von 7
Zum Aufwärmen aus Lektion I3.1. add hat kein export. Was gibt main.js aus?
```
// math.js
function add(a, b) {
  return a + b;
}

// main.js
import {add} from "./math.js";
console.log(add(1, 2));
```
ReferenceError: add is not definedundefined3SyntaxError: The requested module './math.js' does not provide an export named 'add'
Vorhersagen · Aufgabe 2 von 7
Sagen Sie es vorher, bevor Sie weiterlesen. main.js importiert add ohne Klammern. Was gibt es aus?
```
// math.js
export function add(a, b) {
  return a + b;
}
export default function square(x) {
  return x * x;
}

// main.js
import add from "./math.js";
console.log(add(3, 4));
```
9712SyntaxError: The requested module './math.js' does not provide an export named 'add'
Üben · Aufgabe 3 von 7
Ergänzen Sie das Wort, das greet zum Default-Export des Moduls macht.
```
export ____ function greet(name) {
  return "Hello, " + name;
}
```
exportIhre Antwortfunction greet(name) {
Üben · Aufgabe 4 von 7
Ordnen Sie jedem Import oder Export zu, was er tut.
import {add} from "./math.js" — Zuordnung für „import {add} from "./math.js"“
import square from "./math.js" — Zuordnung für „import square from "./math.js"“
import * as math from "./math.js" — Zuordnung für „import * as math from "./math.js"“
export * from "./math.js" — Zuordnung für „export * from "./math.js"“

Üben · Aufgabe 5 von 7

Was gibt main.js aus?

// math.js
export function add(a, b) {
  return a + b;
}
export default function square(x) {
  return x * x;
}

// main.js
import * as math from "./math.js";
console.log(Object.keys(math));

[ 'add' ][ 'add', 'square' ][ 'add', 'default' ][ 'square', 'add' ]

Denksport · Aufgabe 6 von 7
Knobelaufgabe. index.js reicht alles aus math.js weiter. Was gibt main.js aus?
```
// math.js
export function add(a, b) {
  return a + b;
}
export default function square(x) {
  return x * x;
}

// index.js
export * from "./math.js";

// main.js
import square from "./index.js";
console.log(square(5));
```
TypeError: square is not a functionSyntaxError: The requested module './index.js' does not provide an export named 'default'25undefined
Anwenden · Aufgabe 7 von 7
Kleine Aufgabe: Bauen Sie einen Ordner shapes. shapes/circle.js hat einen benannten Export area(r), auf 2 Nachkommastellen gerundet; shapes/square.js hat einen Default-Export für die Fläche eines Quadrats. Schreiben Sie shapes/index.js so, dass main.js circleArea und squareArea, beide namentlich, aus "./shapes/index.js" importieren kann. Geben Sie die Fläche eines Kreises mit Radius 1 und eines Quadrats mit Seite 3 aus.
Prüfen Sie Ihr Ergebnis anhand dieser Liste
- circle.js nutzt einen benannten Export, square.js einen Default-Export
- index.js benennt area mit export {… as …} from in circleArea um
- index.js macht den Default mit export {default as squareArea} from zu einem benannten Export
- main.js importiert beide Namen in Klammern aus dem Index und gibt 3.14 9 aus

Selbst programmieren

Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.

Ausgearbeitetes Beispiel

Jede Art von Import und Export

text.js hat zwei benannte Exporte und einen Default-Export. numbers.js hat einen benannten Export. utils.js ist ein Index-Modul: Es reicht die benannten Exporte von text.js weiter, benennt round2 in round um und macht den Default von text.js zu einem benannten slugify. main.js importiert den Default unter eigenem Namen, benennt capitalize um und nimmt utils.js als Namespace-Objekt.

main.js

import makeSlug, {capitalize as cap} from "./text.js";
import * as utils from "./utils.js";

console.log(makeSlug("Named And Default"));
console.log(cap("module"));
console.log(Object.keys(utils));
console.log(utils.round(3.14159), utils.shout("hi"));

text.js

export function capitalize(word) {
  return word[0].toUpperCase() + word.slice(1);
}

export function shout(text) {
  return text.toUpperCase() + "!";
}

// The one default export of this file.
export default function slugify(title) {
  return title.toLowerCase().split(" ").join("-");
}

numbers.js

export function round2(n) {
  return Math.round(n * 100) / 100;
}

utils.js

// An index module: it gathers features from other files.
export * from "./text.js"; // every named export, but not the default
export {round2 as round} from "./numbers.js";
export {default as slugify} from "./text.js";

Ausführen mit

node main.js

Ausgabe

named-and-default
Module
[ 'capitalize', 'round', 'shout', 'slugify' ]
3.14 HI!

main.js nannte den Default-Export makeSlug; in text.js heißt er slugify. Für einen Default geht jeder Name.
utils.js hat slugify als benannten Export: export {default as slugify} hat den Default dazu gemacht.
Der Namespace hat kein round2: Der Index hat es nur umbenannt weitergereicht, als round.

Ändern und ausführen

Ihr Code (main.js)

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Übungen

Übung 1 von 2

Ein Default, zwei benannte

main.js soll formatPrice(cents) als Default-Export exportieren, das aus 1999 "19.99 EUR" macht, und zwei benannte Exporte: CURRENCY ("EUR") und parsePrice(text), das aus "19.99" 1999 macht. Der Startcode exportiert formatPrice benannt, eine Datei, die den Default importiert, bekommt also nichts. Machen Sie es zum Default-Export.

Ihr Code (main.js)

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise

Hinweis 1
Führen Sie die Tests aus: Das Modul hat keinen Default-Export. Welches Wort macht einen Export zum Default?
Hinweis 2
Ein Modul hat höchstens einen Default-Export; die anderen beiden bleiben benannt.
Hinweis 3
export default function formatPrice(cents) { … }

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

export const CURRENCY = "EUR";

export default function formatPrice(cents) {
  return (cents / 100).toFixed(2) + " " + CURRENCY;
}

export function parsePrice(text) {
  return Math.round(Number(text) * 100);
}

Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

export const CURRENCY = "EUR";

export function formatPrice(cents) {
  return (cents / 100).toFixed(2) + " " + CURRENCY;
}

export function parsePrice(text) {
  return Math.round(Number(text) * 100);
}

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import * as prices from './main.js';

test('Der Default-Export formatiert Cent', () => {
  assert.equal(typeof prices.default, 'function', 'main.js hat keine Default-Export-Funktion');
  const got = prices.default(1999);
  assert.equal(got, '19.99 EUR', `der Default-Export gab ${got}`);
});

test('CURRENCY und parsePrice sind benannte Exporte', () => {
  assert.equal(prices.CURRENCY, 'EUR', `CURRENCY ist ${prices.CURRENCY}`);
  assert.equal(prices.parsePrice('19.99'), 1999, 'parsePrice soll aus 19.99 den Wert 1999 machen');
});

test('formatPrice ist der Default, nicht zusätzlich ein benannter Export', () => {
  assert.equal('formatPrice' in prices, false, 'formatPrice soll nur als Default exportiert werden');
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test

learnrun.js herunterladen

Übung 2 von 2

Ein Index-Modul

text.js und numbers.js sind vorgegeben. main.js ist das Index-Modul einer kleinen Bibliothek: Es soll genau capitalize (benannt, aus text.js), round (round2 aus numbers.js, umbenannt) und slugify (der Default von text.js, als benannter Export) exportieren. Der Startcode nutzt export * zweimal, was round2 unter dem alten Namen weiterreicht und den Default auslässt.

Ihr Code (main.js)

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise

Hinweis 1
Führen Sie die Tests aus: Der Index exportiert round2 und kein slugify. Welche Form reicht einen Namen weiter und kann ihn umbenennen?
Hinweis 2
export {round2 as round} from "./numbers.js"; benennt beim Weiterreichen um.
Hinweis 3
Ein Default wird unter seinem Namen default weitergereicht: export {default as slugify} from "./text.js";

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

export {capitalize} from "./text.js";
export {round2 as round} from "./numbers.js";
export {default as slugify} from "./text.js";

Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

export * from "./text.js";
export * from "./numbers.js";

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import * as lib from './main.js';

test('Der Index exportiert genau capitalize, round und slugify', () => {
  const names = Object.keys(lib);
  assert.deepEqual(names, ['capitalize', 'round', 'slugify'], `main.js exportiert ${JSON.stringify(names)}`);
});

test('Die weitergereichten Funktionen funktionieren', () => {
  assert.equal(lib.capitalize('ada'), 'Ada', 'capitalize soll Ada liefern');
  assert.equal(lib.round(3.14159), 3.14, 'round soll auf 2 Nachkommastellen runden');
  assert.equal(lib.slugify('Hello World'), 'hello-world', 'slugify soll hello-world liefern');
});

text.js

export function capitalize(word) {
  return word[0].toUpperCase() + word.slice(1);
}

export default function slugify(title) {
  return title.toLowerCase().split(" ").join("-");
}

numbers.js

export function round2(n) {
  return Math.round(n * 100) / 100;
}

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test

learnrun.js herunterladen

Häufige Fehler

Einen benannten Export ohne Klammern importieren

import add from "./math.js";
console.log(add(1, 2));

Was Node.js ausgibt

SyntaxError: The requested module './math.js' does not provide an export named 'default'

Warum, und die Lösung

Ohne Klammern verlangt import den Default-Export, und math.js hat keinen. Importieren Sie den benannten Export in Klammern: import {add} from "./math.js". Oder exportieren Sie add mit export default, wenn es das Hauptangebot des Moduls sein soll.

export default mit einer const-Deklaration

export default const VAT = 0.19;
console.log("loaded");

Was Node.js ausgibt

SyntaxError: Unexpected token 'const'

Warum, und die Lösung

export default nimmt einen Ausdruck, eine Funktion oder eine Klasse, keine Variablendeklaration. Deklarieren Sie zuerst, exportieren Sie dann: const VAT = 0.19; export default VAT;. Oder schreiben Sie den Wert direkt: export default 0.19;. Meist ist ein benannter Export, export const VAT = 0.19;, klarer.

Einer Eigenschaft eines Namespace-Objekts etwas zuweisen

import * as math from "./math.js";
math.add = (a, b) => a - b;
console.log(math.add(5, 2));

Was Node.js ausgibt

TypeError: Cannot assign to read only property 'add' of object '[object Module]'

Warum, und die Lösung

Ein Namespace-Objekt ist versiegelt, seine Eigenschaften sind schreibgeschützt: Es ist eine Ansicht der Exporte des Moduls, die nur das Modul selbst ändern kann. Für eine andere Funktion deklarieren Sie Ihre eigene: const subtract = (a, b) => a - b;.

JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode

Abschlussquiz

5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.

Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.

Kernideen

Benannte Exporte und ein Default

Ein Modul kann viele benannte Exporte haben und höchstens einen Default-Export. Benannte Exporte werden in geschweiften Klammern unter ihrem genauen Namen importiert: import {add} from "./math.js". Der Default-Export wird ohne Klammern importiert, unter einem Namen Ihrer Wahl: import square from "./math.js". Beides passt in eine Zeile, der Default zuerst: import square, {add} from "./math.js". export default nimmt eine Funktion, eine Klasse oder einen Ausdruck wie 42, nie eine Deklaration mit const. Benannte Exporte halten die Namen in jeder Datei gleich, was beim Durchsuchen eines Projekts hilft.

Umbenennen und Namespaces

as benennt auf beiden Seiten um: import {add as plus} from "./math.js" gibt Ihnen plus, und add ist in dieser Datei dann nicht definiert. import * as math from "./math.js" liefert ein Namespace-Objekt: Jeder Export ist eine Eigenschaft, math.add, und der Default-Export ist math.default. Der Namespace ist versiegelt (sealed), seine Eigenschaften sind schreibgeschützt, math.add = null wirft also einen TypeError. Er ist außerdem live: Er zeigt immer die aktuellen Werte des Moduls.

Index-Module

Ein Ordner mit Modulen hat oft eine index.js, die sie bündelt, damit andere Dateien von einer Stelle importieren. export {area as circleArea} from "./circle.js" reicht einen Namen weiter, auf Wunsch umbenannt. export {default as squareArea} from "./square.js" macht aus einem Default einen benannten Export. export * from "./text.js" reicht jeden benannten Export weiter, aber nicht den Default. Weitergereichte Namen sind in index.js selbst keine Variablen. Bringen zwei export *-Zeilen denselben Namen mit, schlägt der Import dieses Namens fehl.

Quellen

Zuletzt geprüft am 5. Oktober 2026

Benannte und Default-Exporte, as und import *

Zum Aufwärmen aus Lektion I3.1. add hat kein export. Was gibt main.js aus?

Sagen Sie es vorher, bevor Sie weiterlesen. main.js importiert add ohne Klammern. Was gibt es aus?

Ergänzen Sie das Wort, das greet zum Default-Export des Moduls macht.

Ordnen Sie jedem Import oder Export zu, was er tut.

Was gibt main.js aus?

Knobelaufgabe. index.js reicht alles aus math.js weiter. Was gibt main.js aus?

Selbst programmieren

Jede Art von Import und Export

Übungen

Ein Default, zwei benannte

Ein Index-Modul

Häufige Fehler

Einen benannten Export ohne Klammern importieren

export default mit einer const-Deklaration

Einer Eigenschaft eines Namespace-Objekts etwas zuweisen

Abschlussquiz

Kernideen

Benannte Exporte und ein Default

Umbenennen und Namespaces

Index-Module

Quellen