0Pricing
Frontend Academy · Lektion

Module: import und export

Teilen Sie Code mit benannten und Default-Exports in ES-Module auf, importieren Sie gezielt und verstehen Sie, wie Module-Bundler den Abhängigkeitsgraphen auflösen.

Module: import und export ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Module?

Vor der Einführung von Modulen wurde sämtliches JavaScript im globalen Gültigkeitsbereich ausgeführt. Variablen kollidierten. Die Reihenfolge des Codes war wichtig. Dateien mussten in einer bestimmten Reihenfolge geladen werden. ES-Module geben jeder Datei ihren eigenen Gültigkeitsbereich, explizite Importe und für Tree-Shaking geeignete Exporte.

Benannte Exporte

Exportieren Sie bestimmte Werte mit dem Schlüsselwort export. Eine Datei kann viele benannte Exporte enthalten. Verwender importieren genau das, was sie benötigen.

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Vector {
  constructor(x, y) { this.x = x; this.y = y; }
}

Benannte Importe

Importieren Sie benannte Exporte mit geschweiften Klammern. Sie können mehrere Exporte eines Moduls in einer einzigen Anweisung importieren.

import { PI, add, Vector } from './utils.js';

console.log(PI);        // 3.14159
console.log(add(2, 3)); // 5

Default-Exporte

Jedes Modul kann einen Default-Export haben – typischerweise das Hauptelement, das das Modul bereitstellt. Importieren Sie ihn ohne geschweifte Klammern und geben Sie ihm einen beliebigen Namen.

// Button.js
export default function Button({ label }) {
  return `<button>${label}</button>`;
}

// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name works

Re-Exporte

Ein Modul kann Exporte aus anderen Modulen erneut exportieren und so eine Barrel-Datei erstellen – einen einzigen Einstiegspunkt, der mehrere Elemente erneut exportiert.

// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';

// Consumer:
import { Button, Input, Modal } from './components';

Namespace-Importe

Importieren Sie mit import * as name alles aus einem Modul in ein Namespace-Objekt. Das ist nützlich, wenn Sie viele Exporte benötigen oder deren Herkunft ausdrücklich sichtbar machen möchten.

import * as utils from './utils.js';

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

Importe nur für Seiteneffekte

Einige Module werden ausschließlich wegen ihrer Seiteneffekte importiert (Polyfills, das Registrieren von Event-Handlern). Importieren Sie sie ohne Bindung.

import './polyfills.js'; // runs the code, imports nothing

Dynamischer import() – Code-Splitting

Die dynamische Funktion import() gibt ein Promise zurück. Verwenden Sie sie, um ein Modul verzögert zu laden – nur dann, wenn es benötigt wird. Bundler erstellen automatisch einen separaten Chunk für dynamisch importierte Module.

// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
  const { processFile } = await import('./fileProcessor.js');
  processFile(data);
});

import.meta

import.meta ist ein spezielles Objekt, das innerhalb von Modulen verfügbar ist. import.meta.url ist die URL des Moduls. Vite verwendet import.meta.env für Umgebungsvariablen.

// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'

Modulauflösung

Bundler wie Vite lösen Module aus dem Dateisystem auf (relative Pfade wie './utils'), aus node_modules ('lodash') oder über Pfad-Aliase ('@/components'), die in vite.config.js konfiguriert sind.

CommonJS und ES-Module

Node.js verwendete ursprünglich CommonJS (require / module.exports). Der Browser verwendet ES-Module (import / export). Moderne Node.js-Versionen unterstützen ebenfalls ES-Module mit type: "module" in package.json.

// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };

// ES Modules (modern):
import fs from 'fs';
export { myFunc };

Schnelltest

Was ist der wichtigste Vorteil von dynamic import() gegenüber einem statischen Import?

Zusammenfassung: ES-Module

Benannte Exporte und Importe für mehrere Werte. Default-Export und -Import für das Hauptelement. Re-Exporte erstellen Barrel-Dateien. Dynamischer import() ermöglicht verzögertes Laden und Code-Splitting. import.meta stellt Metadaten des Moduls bereit. Bundler lösen Aliase, node_modules und relative Pfade auf.

Häufig gestellte Fragen

Ist die Lektion „Module: import und export“ kostenlos?

Ja — der vollständige Text von „Module: import und export“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Module: import und export“?

Teilen Sie Code mit benannten und Default-Exports in ES-Module auf, importieren Sie gezielt und verstehen Sie, wie Module-Bundler den Abhängigkeitsgraphen auflösen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Module: import und export“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Array-Methoden: map, filter, reduce, find
  2. Destructuring und Spread von Objekten
  3. Template Literals und Optional Chaining
  4. Module: import und export
← Zurück zu Frontend Academy