<script type="importmap">

<script type="importmap">
  // JSON object defining import
</script>

Die Attribute src, async, nomodule, defer, crossorigin, integrity und referrerpolicy dürfen nicht angegeben werden.

Nur die erste Import-Map im Dokument mit einer Inline-Definition wird verarbeitet; alle zusätzlichen Import-Maps und externen Import-Maps werden ignoriert.

TypeError

Die Import-Map-Definition ist kein JSON-Objekt, der importmap-Schlüssel ist definiert, aber sein Wert ist kein JSON-Objekt, oder der scopes-Schlüssel ist definiert, aber sein Wert ist kein JSON-Objekt.

Browser erzeugen Konsolenwarnungen für andere Fälle, in denen das Import-Map-JSON nicht dem Import-Map-Schema entspricht.

Ein error-Ereignis wird an Skriptelementen mit type="importmap" ausgelöst, die nicht verarbeitet werden. Dies könnte beispielsweise auftreten, wenn das Laden von Modulen bereits begonnen hat, als eine Import-Map bearbeitet wird, oder wenn mehrere Import-Maps auf der Seite definiert sind.

Beim Importieren eines JavaScript-Moduls haben sowohl die import-Anweisung als auch der import()-Operator einen "Modulspezifizierer", der das zu importierende Modul angibt. Ein Browser muss in der Lage sein, diesen Spezifizierer auf eine absolute URL aufzulösen, um das Modul zu importieren.

Zum Beispiel importieren die folgenden Anweisungen Elemente vom Modulspezifizierer "./modules/shapes/square.js", der ein relativer Pfad zur Basis-URL des Dokuments ist, und vom Modulspezifizierer "https://example.com/shapes/circle.js", der eine absolute URL ist.

import { name as squareName, draw } from "./modules/shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

Import-Maps ermöglichen es Entwicklern, nahezu beliebigen Text im Modulspezifizierer zu verwenden; die Map liefert einen entsprechenden Wert, der den Text ersetzt, wenn der Modulspezifizierer aufgelöst wird.

Die untenstehende Import-Map definiert einen imports-Schlüssel, der eine "Modulspezifizierer-Map" mit den Eigenschaften square und circle enthält.

<script type="importmap">
  {
    "imports": {
      "square": "./module/shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

Mit dieser Import-Map können wir dieselben Module wie oben importieren, jedoch mit "Bare Modules" in unseren Modulspezifizierern:

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

Ein Modulspezifizierer-Map-Schlüssel kann auch verwendet werden, um ein Pfadpräfix in einem Modulspezifizierer neu zuzuordnen. Beachten Sie, dass in diesem Fall die Eigenschaft und der zugeordnete Pfad beide mit einem Schrägstrich (/) enden müssen.

<script type="importmap">
  {
    "imports": {
      "shapes/": "./module/shapes/",
      "other-shapes/": "https://example.com/modules/shapes/"
    }
  }
</script>

Wir könnten dann ein Kreis-Modul wie gezeigt importieren.

import { name as circleName } from "shapes/circle.js";

Modulspezifizierer-Schlüssel müssen keine einwortigen Namen ("bare Namen") sein. Sie können auch Pfadseparatoren enthalten oder enden, oder absolute URLs sein, oder relative URL-Pfade, die mit /, ./ oder ../ beginnen.

{
  "imports": {
    "modules/shapes/": "./module/src/shapes/",
    "modules/square": "./module/src/other/shapes/square.js",
    "https://example.com/modules/square.js": "./module/src/other/shapes/square.js",
    "../modules/shapes/": "/modules/shapes/"
  }
}

Wenn es mehrere Modulspezifizierer-Schlüssel in einer Modulspezifizierer-Map gibt, die übereinstimmen könnten, wird der spezifischste Schlüssel ausgewählt (d.h. der mit dem längeren Pfad/Wert).

Ein Modulspezifizierer von ./foo/../js/app.js würde zu ./js/app.js aufgelöst, bevor eine Übereinstimmung gesucht wird. Das bedeutet, dass ein Modulspezifizierer-Schlüssel von ./js/app.js auf den Modulspezifizierer zutreffen würde, auch wenn sie nicht exakt identisch sind.

Sie können den scopes-Schlüssel verwenden, um Zuordnungen bereitzustellen, die nur verwendet werden, wenn das Modul enthaltende Skript einen bestimmten URL-Pfad enthält. Wenn die URL des ladenden Skripts mit dem angegebenen Pfad übereinstimmt, wird die mit dem Scope verbundene Zuordnung verwendet. Dies ermöglicht es, verschiedene Versionen des Moduls je nach dem den Import ausführenden Code zu verwenden.

Zum Beispiel wird die untenstehende Map nur die gesscope als verwendet, wenn das ladende Modul eine URL hat, die den Pfad "/modules/custom-shapes/" enthält.

<script type="importmap">
  {
    "imports": {
      "square": "./module/shapes/square.js"
    },
    "scopes": {
      "/modules/custom-shapes/": {
        "square": "https://example.com/modules/shapes/square.js"
      }
    }
  }
</script>

Wenn mehrere Scopes mit der Referrer-URL übereinstimmen, wird der spezifischste Scope-Pfad verwendet (der Scope-Schlüsselname mit dem längsten Namen). Der Browser fällt auf den nächsten spezifischsten Scope-Pfad zurück, wenn es keinen passenden Spezifizierer gibt, und so weiter, bis schließlich auf die Modulspezifizierer-Map im imports-Schlüssel zurückgegriffen wird.

Sie können den integrity-Schlüssel verwenden, um Zuordnungen für Metadaten zur Integrität bereitzustellen. Dies ermöglicht es Ihnen, die Integrität von dynamisch oder statisch importierten Modulen sicherzustellen. integrity ermöglicht es Ihnen auch, einen Fallback für Top-Level- oder vorgeladene Module bereitzustellen, falls sie nicht bereits ein integrity-Attribut enthalten.

Die Map-Schlüssel repräsentieren Modul-URLs, die entweder absolut oder relativ sein können (begonnen mit /, ./ oder ../). Die Map-Werte repräsentieren Integritätsmetadaten, identisch mit denen, die in integrity-Attributwerten verwendet werden.

Zum Beispiel definiert die untenstehende Map Integritätsmetadaten für das square.js-Modul (direkt) und seinen bare specifier (transitiv, über den imports-Schlüssel).

<script type="importmap">
  {
    "imports": {
      "square": "./module/shapes/square.js"
    },
    "integrity": {
      "./module/shapes/square.js": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
    }
  }
</script>

Das Folgende ist eine "formale" Definition der Import-Map-JSON-Repräsentation.

Die Import-Map muss ein gültiges JSON-Objekt sein, das beliebige der optionalen Schlüssel imports, scopes und integrity definieren kann. Jeder Schlüsselwert muss ein Objekt sein, das leer sein darf.

imports Optional

Der Wert ist eine Modul-Spezifizierer-Map, die die Zuordnungen zwischen dem Modulspezifizierer-Text, der in einer import-Anweisung oder im import()-Operator erscheinen könnte, und dem Text, der es beim Auflösen des Spezifizierers ersetzt, bereitstellt.

Dies ist die Fallback-Map, die nach passenden Modulspezifizierern durchsucht wird, wenn keine scopes-Pfad-URLs übereinstimmen oder wenn Modulspezifizierer-Maps in passenden scopes-Pfade keinen Schlüssel, der mit dem Modulspezifizierer übereinstimmt, enthalten.

<module specifier map>

Eine "Modulspezifizierer-Map" ist ein gültiges JSON-Objekt, bei dem die Schlüssel Text sind, der im Modulspezifizierer beim Importieren eines Moduls enthalten sein kann, und die entsprechenden Werte die URLs oder Pfade sind, die diesen Text ersetzen, wenn der Modulspezifizierer zu einer Adresse aufgelöst wird.

Das Modulspezifizierer-Map-JSON-Objekt hat folgende Anforderungen:

• Keiner der Schlüssel darf leer sein.
• Alle Werte müssen Zeichenketten sein, die entweder eine gültige absolute URL oder eine gültige URL-Zeichenkette definieren, die mit /, ./ oder ../ beginnt.
• Wenn ein Schlüssel mit / endet, muss auch der entsprechende Wert mit / enden. Ein Schlüssel mit einem abschließenden / kann als Präfix verwendet werden, wenn Moduladressen gemappt (oder umgemappt) werden.
• Die Reihenfolge der Objekteigenschaften ist irrelevant: Wenn mehrere Schlüssel mit dem Modulspezifizierer übereinstimmen können, wird der spezifischste Schlüssel verwendet (mit anderen Worten, ein Spezifizierer "olive/branch/" würde vor "olive/" gematcht werden).

integrity Optional

Definiert ein gültiges JSON-Objekt, wo die Schlüssel Zeichenketten sind, die gültige absolute oder relative URLs (beginnend mit /, ./ oder ../) enthalten, und die entsprechenden Werte sind gültige Integritätsmetadaten.

Wenn die URL eines Skripts, das ein Modul importiert oder preloadet, mit einem Schlüssel im integrity-Objekt übereinstimmt, werden die entsprechenden Integritätsmetadaten auf die Fetch-Optionen des Skripts angewendet, es sei denn, sie haben bereits Integritätsmetadaten angehängt.

scopes Optional

Scopes definieren pfadspezifische Modulspezifizierer-Maps, die ermöglichen, dass die Auswahl der Map vom Pfad des die Module importierenden Codes abhängt.

Das Scopes-Objekt ist ein gültiges JSON-Objekt, bei dem jede Eigenschaft ein <scope key> ist, was ein URL-Pfad ist, mit einem entsprechenden Wert, der eine <module specifier map> ist.

Wenn die URL eines Skripts, das ein Modul importiert, mit einem <scope key>-Pfad übereinstimmt, wird der mit dem Schlüssel assoziierte <module specifier map>-Wert zuerst auf passende Spezifizierer überprüft. Wenn es mehrere übereinstimmende Scope-Schlüssel gibt, werden die Werte der spezifischsten/verschachtelten Scope-Pfade zuerst auf übereinstimmende Modulspezifizierer überprüft. Die Fallback-Modulspezifizierer-Map in imports wird verwendet, wenn es keine übereinstimmenden Modulspezifizierer-Schlüssel in irgendeiner der übereinstimmenden Scoped-Modulspezifizierer-Maps gibt.

Beachten Sie, dass der Scope nicht ändert, wie eine Adresse aufgelöst wird; relative Adressen werden immer relativ zur Import-Map Basis-URL aufgelöst.

• JavaScript-Module > Module mit Import-Maps importieren
• Das type-Attribut von HTML-<script>-Elementen
• import-Anweisung
• import()-Operator