ES-Modul-Skripte: type=module
Laden Sie JavaScript mit type=module als ES-Module
ES-Modul-Skripte: type=module ist eine kostenlose HTML 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 HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind ES-Module?
Ein ES-Modul ist eine JavaScript-Datei, die import- und export-Deklarationen verwendet. Module haben ihren eigenen Gültigkeitsbereich (keine Verschmutzung des globalen Namensraums), standardmäßig den Strict Mode und explizite Abhängigkeiten – damit gehören jahrzehntealte Probleme mit der Reihenfolge von Script-Tags der Vergangenheit an.
Das Module-Script-Tag
<script type="module" src="app.js"> teilt dem Browser mit, dass es sich bei der Datei um ein Modul handelt. Der Browser analysiert die Imports, lädt die Abhängigkeiten parallel und führt den Einstiegspunkt erst aus, wenn der gesamte Abhängigkeitsgraph heruntergeladen und kompiliert wurde.
<script type="module" src="app.js"></script>Module werden verzögert ausgeführt
Modul-Skripte verhalten sich so, als wäre defer gesetzt: Sie werden parallel zum Parsen des HTML-Dokuments heruntergeladen und nach dem Parsen in der Reihenfolge ihrer Deklaration ausgeführt. Sie können <script type="module"> an beliebiger Stelle (auch in <head>) platzieren, ohne die Seite zu blockieren.
Imports verwenden Specifier
Eine Import-Anweisung verwendet einen Specifier – entweder eine relative URL (./utils.js), eine absolute URL (https://cdn.example.com/lib.js) oder einen nicht aufgelösten Namen (lodash). Für nicht aufgelöste Namen ist eine Import Map erforderlich (als Nächstes behandelt), da der Browser nicht weiß, welcher Datei sie zugeordnet sind.
// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));Dateierweiterungen sind erforderlich
Browser fügen Import-Specifiern nicht automatisch .js hinzu. import "./utils" schlägt fehl, während import "./utils.js" funktioniert. Bundler und Node sind möglicherweise weniger strikt; der Browser ist strikt, daher sollten Sie die Erweiterung ausdrücklich angeben.
CORS ist erforderlich
Module werden immer mit CORS abgerufen, auch bei derselben Origin. Moduldateien von einer anderen Origin müssen den passenden Access-Control-Allow-Origin-Header senden, sonst schlägt der Import fehl. Die meisten CDNs (esm.sh, jsdelivr, unpkg) sind standardmäßig korrekt dafür konfiguriert.
Top-Level-Await
Module unterstützen await auf der obersten Ebene – ein Wrapper mit einer asynchronen Funktion ist nicht erforderlich: const data = await fetch("/api").then(r => r.json()). Die Konsumenten des Moduls warten mit ihrer Ausführung, bis das Top-Level-Await aufgelöst wurde.
// data.js
export const config = await fetch("/config.json").then(r => r.json());
// app.js (waits for data.js)
import { config } from "./data.js";
console.log(config);Module sind Singletons
Ein Modul wird pro Sitzung genau einmal ausgewertet, unabhängig davon, wie viele andere Module es importieren. Das Exportobjekt wird gemeinsam genutzt – jeder Konsument sieht dieselbe Instanz. Dadurch eignen sich Module besonders gut zum Teilen von Singletons wie einem Konfigurationsobjekt oder einem State Store.
Inline-Module
Sie können Module auch inline schreiben: <script type="module">import x from "./y.js"; ...</script>. Das ist für Bootstrap-Code oder Experimente nützlich, externe Dateien lassen sich jedoch leichter debuggen und cachen.
nomodule als Fallback für Legacy-Browser
Kombinieren Sie ein <script type="module"> mit einem <script nomodule src="legacy.js">. Moderne Browser führen das Modul aus und ignorieren das nomodule-Skript; Legacy-Browser führen das nomodule-Skript aus und ignorieren das Modul. Dieses Vorgehen wird bei der Migration zu vollständig auf ESM basierenden Apps verwendet.
Fehler und fehlgeschlagene Imports
Ein fehlgeschlagener Import (404, CORS, Syntaxfehler) löst einen Fehler aus und verhindert die Ausführung des gesamten Modulgraphs. Verwenden Sie das Netzwerk-Panel, um fehlgeschlagene Modul-Anfragen zu erkennen, und die Konsole, um die tatsächliche Fehlermeldung des Imports zu lesen.
Wissenscheck
Warum verhalten sich Modul-Skripte so, als wäre defer gesetzt, obwohl Sie es nicht angegeben haben?
Zusammenfassung
<script type="module"> lädt ES-Module – Dateien im Strict Mode mit Import-/Export-Deklarationen, die einen Abhängigkeitsgraphen auflösen. Module werden standardmäßig verzögert ausgeführt, erfordern explizite Dateierweiterungen, werden per CORS abgerufen, als Singletons ausgewertet und unterstützen Top-Level-Await. Verwenden Sie nomodule als Fallback für Legacy-Browser und achten Sie auf fehlende Dateierweiterungen, wenn Imports scheinbar fehlschlagen.
Häufig gestellte Fragen
Ist die Lektion „ES-Modul-Skripte: type=module“ kostenlos?
Ja — der vollständige Text von „ES-Modul-Skripte: type=module“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „ES-Modul-Skripte: type=module“?
Laden Sie JavaScript mit type=module als ES-Module Du übst HTML 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 HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML 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-Modul-Skripte: type=module“?
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 HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML 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-Modul-Skripte: type=module
- Import Maps: importmap
- Dynamischer Import mit import() in Modulen
- Grundlagen der Module Federation