Importattribute

Syntax

import { names } from "module-name" with {};
import { names } from "module-name" with { key: "data" };
import { names } from "module-name" with { key: "data", key2: "data2" };
import { names } from "module-name" with { key: "data", key2: "data2", /* , */ keyN: "dataN" };

export { names } from "module-name" with {};
export { names } from "module-name" with { key: "data" };
export { names } from "module-name" with { key: "data", key2: "data2" };
export { names } from "module-name" with { key: "data", key2: "data2", /* , */ keyN: "dataN" };

Parameter

keyN

Ein Schlsselattribut. Kann ein Bezeichner oder ein Stringliteral sein. Alle Schlssel mssen eindeutig sein und der Laufzeitumgebung bekannt sein.

"dataN"

Ein Attributwert. Muss ein Stringliteral sein.

Ausnahmen

SyntaxError

Ein nicht untersttzter key wurde in einem statischen Import angegeben.

TypeError

Ein nicht untersttzter key wurde in einem dynamischen Import angegeben.

Beachten Sie, dass das Angeben eines nicht untersttzten Wertes fr einen untersttzten Schlssel in einigen Fllen ebenfalls zu einer Ausnahme fhren kann, je nach Schlssel.

Beschreibung

Importattribute geben der Runtime vor, wie ein bestimmtes Modul geladen werden soll.

Der Hauptverwendungszweck ist das Laden von nicht-JS-Modulen, wie z. B. JSON-Module und CSS-Module. Betrachten Sie die folgende Anweisung:

import data from "https://example.com/data.json";

Im Web fhrt jede Importanweisung zu einer HTTP-Anfrage. Die Antwort wird dann in ein JavaScript-Wert vorbereitet und der Runtime zur Verfgung gestellt. Die Antwort knnte beispielsweise so aussehen:

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
...
{"name":"Maria"}

Module werden nur nach dem bereitgestellten Medientyp (MIME-Typ) identifiziert und geparst die Dateierweiterung in der URL kann nicht verwendet werden, um den Dateityp zu identifizieren. In diesem Fall ist der MIME-Typ application/json, was dem Browser mitteilt, dass die Datei JSON ist und als JSON geparst werden muss. Wenn aus irgendeinem Grund (z. B. Server-Manipulation oder Flschung) der Medientyp in der Serverantwort auf text/javascript (fr JavaScript-Quellen) gesetzt wird, wrde die Datei als Code geparst und ausgefhrt werden. Wenn die "JSON"-Datei tatschlich bsartigen Code enthlt, wrde die import-Deklaration ungewollt externen Code ausfhren, was ein ernsthaftes Sicherheitsrisiko darstellt.

Importattribute beheben dieses Problem, indem sie dem Autoren ermglichen, explizit anzugeben, wie ein Modul validiert werden sollte. Insbesondere erlaubt das type-Attribut Ihnen, zu berprfen, ob die Datei mit einem bestimmten Medientyp bereitgestellt wird, und den Import schlgt fehl, wenn ein anderer Medientyp verwendet wird.

Beispielsweise kann der obige Code so geschrieben werden, dass der erwartete Typ "json" ist, und der Import wrde fehlschlagen, wenn es als text/javascript (oder einem anderen Medientyp als application/json) bereitgestellt wird:

import data from "https://example.com/data.json" with { type: "json" };

Das type-Attribut ermglicht es Ihnen zu spezifizieren, dass Module als JSON, CSS oder reiner Text bereitgestellt werden (und implizit als JavaScript).

Andere Attribute knnen ebenfalls untersttzt werden und knnen das Verhalten verschiedener Teile des Ladeprozesses beeinflussen. Ein Syntaxfehler wird ausgelst, wenn ein unbekanntes Attribut verwendet wird.

Standardattribute

Die verfgbaren Attribute hngen von der Sprache und der Laufzeitumgebung ab. Der ECMAScript-Standard definiert das type-Attribut mit den Werten "json" und "text".

Die HTML-Spezifikation definiert ebenfalls das type-Attribut mit den Werten "json", "text" und "css" dies sind die Attribute, die in Browserumgebungen untersttzt werden.

JSON-Module ({ type: "json" })

Der json-Typ gibt an, dass die importierte Datei JSON enthalten muss. Sie knnen JSON von einer Datei in das data-Objekt laden, indem Sie den folgenden Code verwenden:

import data from "https://example.com/data.json" with { type: "json" };

Wenn die Datei mit einem anderen Medientyp als "application/json" bereitgestellt wird, schlgt der Import fehl.

Das type-Attribut ndert, wie das Modul abgerufen wird (der Browser sendet die Anfrage mit dem Accept: application/json-Header), aber nicht, wie das Modul geparst oder ausgewertet wird. Die Runtime wei bereits, dass das Modul als JSON geparst werden muss, basierend auf dem MIME-Typ der Antwort. Sie verwendet das Attribut nur, um nachtrgliches berprfen durchzufhren, dass das data.json-Modul tatschlich ein JSON-Modul ist. Zum Beispiel, wenn der Antwort-Header stattdessen auf Content-Type: text/javascript gendert wrde, wrde das Programm mit einem hnlichen Fehler wie oben fehlschlagen.

Die Spezifikation ruft explizit type: "json" als untersttztes Attribut auf wenn ein Modul als type: "json" angegeben ist und die Runtime diesen Import nicht fehlschlgt, muss es als JSON geparst werden.

Es gibt jedoch keine Verhaltensanforderung anderweitig: Bei Importen ohne ein type: "json"-Attribut kann die Runtime es dennoch als JSON parsen, wenn die Sicherheit in dieser Umgebung kein Problem darstellt.

Browser hingegen gehen implizit davon aus, dass das Modul JavaScript ist, wenn der type nicht angegeben ist, und schlagen fehl, wenn das Modul kein JavaScript ist (zum Beispiel JSON). Dies stellt sicher, dass Modultypen immer streng validiert werden und verhindert Sicherheitsrisiken. Nicht-Browser-Laufzeiten wie Node und Deno stimmen mit den Browser-Semantiken berein und erzwingen type fr JSON-Module.

Mit anderen Worten: Wenn Sie den type weglassen und versuchen, eine Datei als "application/json" zu importieren, erhalten Sie normalerweise einen Fehler wie den folgenden:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.

CSS-Module ({ type: "css" })

Die HTML-Spezifikation definiert den css-Typ, der ein Stylesheet in ein Skript als CSSStyleSheet-Objekt importiert.

Der untenstehende Code zeigt, wie Sie mglicherweise einen Stil importieren und zu Ihrem Dokument hinzufgen knnen. Der Import wird eine Ausnahme werfen, wenn example_styles.css mit einem anderen Medientyp als "text/css" bereitgestellt wird.

import exampleStyles from "https://example.com/example_styles.css" with { type: "css" };

document.adoptedStyleSheets.push(exampleStyles);

Beachten Sie, dass das Importieren von CSS-Modulen in Worker-Umgebungen normalerweise nicht untersttzt wird, da die CSSOM-Spezifikation CSSStyleSheet nur im Fensterkontext bereitstellt.

Textmodule ({ type: "text" })

Der text-Typ ermglicht das Importieren der Quelle eines Moduls als String-Wert. Sie knnen Text von einer Datei in den text-String laden, indem Sie den folgenden Code verwenden:

import text from "https://example.com/file.txt" with { type: "text" };

Die Datei wird mit einem Accept: text/plain-Header angefordert, aber der Wert des Content-Type-Headers der Antwort wird ignoriert, und alle Dateien werden als UTF-8 geparst. Sie kann beliebige Textdaten enthalten, sogar JavaScript-Code (der als reiner Text behandelt wird).

Beabsichtigte Semantik fr Importattribute

Ein Attribut kann das Verhalten der Runtime in jeder Phase des Modulladeprozesses ndern:

• Auflsung: Das Attribut ist Teil des Modulspecifiers (des Strings in der from-Klausel). Daher knnen bei gleichem Stringpfad unterschiedliche Attribute dazu fhren, dass vollstndig unterschiedliche Module geladen werden. Zum Beispiel untersttzt TypeScript das resolution-mode-Attribut.

  ts

  import type { TypeFromRequire } from "pkg" with {
    "resolution-mode": "require",
  };
  

• Abrufen: Zum Beispiel werden CSS-Module mit dem destination auf "style" gesetzt abgerufen, JSON-Module mit destination: "json", und Textmodule mit destination: "text". Dies bedeutet, dass der Server bei gleicher Ziel-URL dennoch unterschiedlichen Inhalt zurckgeben kann.

• Parsen und Auswertung: Die Runtime kann das Attribut verwenden, um zu bestimmen, wie das Modul geparst und ausgewertet wird.

Beispiele

Importieren von JSON-Modulen mit dem Type-Attribut

In data.json:

{
  "name": "Shilpa"
}

In index.html:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <script type="module">
      import data from "./data.json" with { type: "json" };

      const p = document.createElement("p");
      p.textContent = `name: ${data.name}`;
      document.body.appendChild(p);
    </script>
  </head>
  <body></body>
</html>

Starten Sie einen lokalen HTTP-Server (siehe Fehlerbehebung) und gehen Sie zur index.html-Seite. Sie sollten Shilpa auf der Seite sehen.

Verwenden von Importattributen mit dynamischem Import

Importattribute werden auch als zweiter Parameter der import()-Syntax akzeptiert.

const data = await import("./data.json", {
  with: { type: "json" },
});

Beachten Sie, dass dynamische Importe, genau wie statische Importe, fr die Lebensdauer der Umgebung (z. B. einer Seite oder eines Workers) zwischengespeichert werden. Wenn Sie erwarten, dass sich diese Daten ndern (wie die neuesten Nachrichten oder die Punkte eines Benutzers), verwenden Sie stattdessen die Fetch-API.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• import
• export
• import()
• Importattribute Vorschlag
• JSON-Module Vorschlag
• Import Text Vorschlag