Frontend Academy · Lektion

ES-Module: import, export und dynamischer Import

Verwenden Sie benannte Exports, Default-Exports und Namespace-Imports und laden Sie Code mit dynamic import() zur besseren Performance verzögert.

ES-Module: import, export und dynamischer Import ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Wiederholung: Grundlagen der ES-Module

ES-Module geben jeder Datei einen eigenen Gültigkeitsbereich. Benannte Exporte teilen bestimmte Werte; Default-Exporte teilen den primären Wert. Der Bundler oder Browser löst Imports beim Laden auf.

// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }

// Default export
export default class ApiClient {
  constructor(base = API_BASE) { this.base = base; }
}

Tree Shaking — Warum benannte Exporte wichtig sind

Bundler (Rollup, esbuild, Vite) entfernen nicht verwendete Exporte. Wenn Sie nur { formatDate } importieren, entfernt der Bundler alles andere aus dem Bundle. Benannte Exporte ermöglichen Tree Shaking; import * as utils kann es verhindern.

// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunk

Dynamischer Import() — Lazy Loading

Der dynamische import() gibt ein Promise zurück. Das Modul wird erst abgerufen, wenn der Code ausgeführt wird. Bundler teilen solche Imports automatisch in separate Chunks auf.

// Only load the heavy charting library when needed:
const showChart = async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(canvas, config);
};

btn.addEventListener('click', showChart);

Dynamischer Import mit Fehlerbehandlung

Schließen Sie dynamische Imports in try/catch ein, um Netzwerkfehler oder fehlende Module angemessen zu behandeln.

try {
  const module = await import('./optional-feature.js');
  module.activate();
} catch (err) {
  console.warn('Optional feature unavailable:', err.message);
}

import.meta

import.meta enthält Metadaten über das aktuelle Modul. Wichtige Eigenschaften sind: import.meta.url (absolute URL), import.meta.env (Vite-Umgebungsvariablen), import.meta.resolve().

// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;

// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

Modulausführung — einmalig

ES-Module werden unabhängig davon, wie oft sie importiert werden, nur einmal ausgewertet. Alle Imports desselben Moduls verwenden dieselbe Instanz. Dadurch eignen sich Module hervorragend für Singletons (Stores, Event-Busse).

// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;

// Any file that imports from store.js gets the same state instance

Zirkuläre Abhängigkeiten

Zwei Module können sich gegenseitig importieren. JavaScript unterstützt dies, aber Werte können bei ihrer ersten Verwendung aufgrund der Auswertungsreihenfolge undefined sein. Strukturieren Sie Ihren Code in den meisten Fällen um, um Zyklen zu vermeiden.

Nur-Typ-Imports in TypeScript

Verwenden Sie import type { ... }, um nur Typen zu importieren. Diese werden beim Kompilieren entfernt und erscheinen nie im ausgegebenen Bundle. Verwenden Sie sie, um durch reine Typverweise verursachte zirkuläre Abhängigkeiten zu vermeiden.

import type { User } from './types.js';

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

Re-Exportieren und Barrel-Dateien

Eine Barrel-Datei exportiert Inhalte aus mehreren Modulen erneut und schafft so einen praktischen zentralen Importpunkt. Seien Sie bei Barrel-Dateien in großen Anwendungen vorsichtig – sie können Tree Shaking beeinträchtigen.

// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';

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

Script type=module im Browser

Fügen Sie einem Script-Tag type="module" hinzu, um die ES-Modul-Syntax direkt im Browser zu aktivieren – ohne Bundler. Module werden standardmäßig verzögert ausgeführt und haben ihren eigenen Gültigkeitsbereich.

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

Interoperabilität von CommonJS und ESM

Node.js unterstützt beide Varianten. ESM-Dateien verwenden .mjs oder setzen "type": "module" in package.json. Wenn Sie CommonJS-Pakete aus ESM verwenden, ist der Default-Export der Wert von module.exports. Bundler behandeln dies transparent.

Kurzer Test

Welchen Performance-Vorteil bieten benannte Exporte gegenüber einem einzelnen Default-Export-Objekt?

Zusammenfassung: ES-Module im Detail

Module werden einmal ausgeführt; alle Importierenden verwenden dieselbe Instanz. Tree Shaking entfernt nicht verwendete benannte Exporte. Dynamischer import() ermöglicht Lazy Loading und Code-Splitting. import.meta stellt den Modulkontext bereit. Barrel-Dateien sind praktisch, können aber Tree Shaking beeinträchtigen. Nur-Typ-Imports in TypeScript erzeugen keine Ausgabe.

Häufig gestellte Fragen

Ist die Lektion „ES-Module: import, export und dynamischer Import“ kostenlos?

Ja — der vollständige Text von „ES-Module: import, export und dynamischer Import“ 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 „ES-Module: import, export und dynamischer Import“?

Verwenden Sie benannte Exports, Default-Exports und Namespace-Imports und laden Sie Code mit dynamic import() zur besseren Performance verzögert. 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 1 von 4.

Wie lange dauert die Lektion „ES-Module: import, export und dynamischer Import“?

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

ES-Module: import, export und dynamischer Import
npm und package.json: Abhängigkeiten und Scripts
Vite: Dev-Server und Build
Bundling-Konzepte: Tree Shaking und Code Splitting

← Zurück zu Frontend Academy