Import Maps: importmap
Ordnen Sie nicht vollständig qualifizierte Modulbezeichner mit importmap URLs zu
Import Maps: importmap ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Das Problem mit nicht aufgelösten Specifiern
In Node funktioniert import "lodash", weil der Resolver node_modules/lodash findet. Browser verfügen nicht über node_modules – sie benötigen eine echte URL. Ohne zusätzliche Angaben löst import "lodash" den Fehler „Failed to resolve module specifier“ aus.
Was Import Maps bewirken
Eine Import Map definiert ein JSON-Wörterbuch, das nicht aufgelöste Specifier (und URL-Präfixe) auf echte URLs abbildet. Der Browser konsultiert die Map beim Auflösen von Modulen und wandelt import "lodash" in einen Abruf von der von Ihnen konfigurierten URL um.
<script type="importmap">
{
"imports": {
"lodash": "https://esm.sh/lodash@4.17.21",
"preact": "https://esm.sh/preact"
}
}
</script>Die Reihenfolge der Deklarationen ist entscheidend
Die Import Map muss vor jedem <script type="module"> stehen, das nicht aufgelöste Specifier verwendet – sobald ein Modul mit der Auflösung von Imports begonnen hat, ist die Map festgelegt. Platzieren Sie das <script type="importmap"> weit oben im <head>.
Präfix-Zuordnungen
Einträge mit abschließendem Schrägstrich stimmen mit URL-Präfixen überein: "@/": "/src/" ordnet jeden import "@/utils/sum.js" dem Pfad /src/utils/sum.js zu. So können Sie die von Bundlern häufig unterstützte „Alias“-Syntax nachbilden.
Versionierung über eine Map
Eine Import Map zentralisiert Versionsentscheidungen: Ändern Sie "react" in einer einzigen Stelle von esm.sh/react@18 zu esm.sh/react@19, und jedes importierende Modul übernimmt die neue URL. Ohne Import Map ist an jeder Import-Stelle eine eigene Version fest eincodiert.
Scopes
Mit dem Schlüssel scopes können Sie für verschiedene Teile Ihrer Website unterschiedliche Zuordnungen festlegen. Innerhalb von /admin/ benötigen Sie möglicherweise eine neuere Version einer Abhängigkeit als in /public/; mit Scopes können Sie Zuordnungen nach Pfad festlegen.
{
"imports": { "lodash": "https://esm.sh/lodash@4" },
"scopes": {
"/admin/": { "lodash": "https://esm.sh/lodash@5" }
}
}Eine Map pro Dokument
Jedes Dokument darf höchstens ein <script type="importmap"> enthalten. Zwei davon auf derselben Seite sind ungültig; führen Sie ihren Inhalt in einem einzigen Block zusammen, um die Einträge zu kombinieren.
Externe Import Maps
Sie können die Map unter einer externen URL hosten, und zwar mit <script type="importmap" src="map.json">. Die Browserunterstützung ist neuer als bei Inline-Maps, inzwischen jedoch weit verbreitet. Das ist nützlich, wenn Sie eine große Map unabhängig vom Dokument cachen möchten.
Import Maps generieren
Tools wie JSPM Generator und der --servedir-Modus von esbuild erzeugen automatisch Import Maps aus package.json. Generierte Maps enthalten jede transitive Abhängigkeit und ordnen sie einer CDN-URL zu – ein Workflow ohne node_modules.
Browserunterstützung
Import Maps werden von Chrome, Edge, Safari und Firefox unterstützt. Ältere Browser ignorieren das <script type="importmap">-Tag, wodurch nicht aufgelöste Specifier fehlschlagen. Für umfassende Unterstützung älterer Browser sollten Sie mit einem Bundler bauen, der die Specifier zur Build-Zeit auflöst, und einfache URLs ausliefern.
Polyfill-Option
Das ES Module Shims-Polyfill (es-module-shims.js) ergänzt ältere Browser um Unterstützung für Import Maps und mehrere neuere Funktionen. Binden Sie es vor Ihrem Import-Map-Skript ein. Die meisten modernen Projekte verzichten auf das Polyfill und verlassen sich auf die native Unterstützung.
Wissenscheck
Warum muss ein <script type="importmap"> vor jedem Modul-Skript stehen, das nicht aufgelöste Specifier verwendet?
Zusammenfassung
Import Maps ordnen nicht aufgelöste Specifier und URL-Präfixe echten URLs zu und ermöglichen damit wieder das Node-ähnliche „import lodash“ im Browser. Deklarieren Sie sie pro Dokument genau einmal vor jedem Modul-Skript, optional extern über src, und verwenden Sie Scopes für Überschreibungen nach Pfad. Kombinieren Sie sie mit einem CDN (esm.sh, jsdelivr) für einen Workflow ohne node_modules.
Häufig gestellte Fragen
Ist die Lektion „Import Maps: importmap“ kostenlos?
Ja — der vollständige Text von „Import Maps: importmap“ 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 „Import Maps: importmap“?
Ordnen Sie nicht vollständig qualifizierte Modulbezeichner mit importmap URLs zu 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 2 von 4.
Wie lange dauert die Lektion „Import Maps: importmap“?
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