import.meta.resolve() - JavaScript | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

import.meta.resolve()

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2023 browserübergreifend verfügbar.

import.meta.resolve() ist eine eingebaute Funktion, die auf dem import.meta-Objekt eines JavaScript-Moduls definiert ist. Sie löst einen Modulspezifizierer zu einer URL auf, indem sie die URL des aktuellen Moduls als Basis verwendet.

In diesem Artikel

Syntax

import.meta.resolve(moduleName)

Parameter

moduleName

Ein String, der ein potenziell importierbares Modul spezifiziert. Dies kann ein relativer Pfad (wie "./lib/helper.js"), ein einfacher Name (wie "my-module") oder eine absolute URL (wie "https://example.com/lib/helper.js") sein.

Rückgabewert

Gibt einen String zurück, der dem Pfad entspricht, der importiert würde, wenn das Argument an import() übergeben würde.

Beschreibung

import.meta.resolve() ermöglicht es einem Skript, auf den Modulspezifizierer-Auflösungsalgorithmus für einen Namen zuzugreifen, wie folgt:

js
// Script at https://example.com/main.js

const helperPath = import.meta.resolve("./lib/helper.js");
console.log(helperPath); // "https://example.com/lib/helper.js"

Beachten Sie, dass import.meta.resolve() nur die Auflösung durchführt und nicht versucht, den resultierenden Pfad zu laden oder zu importieren. Daher ist der Rückgabewert identisch, unabhängig davon, ob der zurückgegebene Pfad einer existierenden Datei entspricht und unabhängig davon, ob diese Datei gültigen Code für ein Modul enthält. Dies ermöglicht es, dass import.meta.resolve() eine synchron Operation ist.

Es unterscheidet sich vom dynamischen Import, denn obwohl beide ein Modulspezifizierer als erstes Argument akzeptieren, gibt import.meta.resolve() den Pfad zurück, der importiert werden würde, ohne zu versuchen, auf diesen Pfad zuzugreifen. Daher sind die beiden folgenden effektiv derselbe Code:

js
// Approach 1
console.log(await import("./lib/helper.js"));

// Approach 2
const helperPath = import.meta.resolve("./lib/helper.js");
console.log(await import(helperPath));

Jedoch, selbst wenn "./lib/helper.js" nicht erfolgreich importiert werden kann, wird der zweite Ausschnitt keinen Fehler begegnen, bis er versucht, den Import in Zeile 2 durchzuführen.

Bare Modulnamen

Sie können einen einfachen Modulnamen (auch bekannt als einfacher Modulspezifizierer) an import.meta.resolve() übergeben, solange die Modulauflösung für den Namen definiert ist. Zum Beispiel können Sie dies in einem Browser mithilfe einer Importkarte definieren:

html
<!-- index.html -->
<script type="importmap">
  {
    "imports": {
      "my-module": "./modules/my-module/index.js"
    }
  }
</script>

<script type="module">
  const moduleEntryPath = import.meta.resolve("my-module");
  console.log(moduleEntryPath);
</script>

Da dieser Codeausschnitt nicht versucht, moduleEntryPath zu importieren — ebenso wenig die Importkarte — wird die aufgelöste URL angezeigt, unabhängig davon, ob ./modules/my-module/index.js tatsächlich existiert.

Vergleich mit neuem URL()

Der URL()-Konstruktor akzeptiert ein zweites Argument als Basis-URL. Wenn das erste Argument ein relativer Pfad ist und die Basis-URL import.meta.url ist, ist der Effekt ähnlich wie bei import.meta.resolve().

js
const helperPath = new URL("./lib/helper.js", import.meta.url).href;
console.log(helperPath);

Dies ist auch eine nützliche Ersetzungssyntax, wenn ältere Browser unterstützt werden sollen. Es gibt jedoch einige Unterschiede:

import.meta.resolve() gibt einen String zurück, während new URL() ein URL-Objekt zurückgibt. Es ist möglich, href oder toString() auf die konstruierte URL anzuwenden, aber dies könnte in einigen JavaScript-Umgebungen oder beim Einsatz von Tools wie Bundlern, um den Code statisch zu analysieren, immer noch nicht dasselbe Ergebnis liefern.
import.meta.resolve() ist sich zusätzlicher Auflösungskonfigurationen bewusst, wie z.B. dem Auflösen einfacher Modulnamen unter Verwendung von Importkarten, wie oben beschrieben. new URL() ist sich Importkarten nicht bewusst und behandelt einfache Modulnamen als relative Pfade (d.h. new URL("my-module", import.meta.url) bedeutet new URL("./my-module", import.meta.url)).

Einige Tools erkennen new URL("./lib/helper.js", import.meta.url).href als Abhängigkeit von "./lib/helper.js" (ähnlich wie ein Import) und berücksichtigen dies bei Funktionen wie Bündelung, Import-Umschreibung für verschobene Dateien, "Gehe zu Quelle"-Funktionalität usw. Da import.meta.resolve() jedoch weniger mehrdeutig ist und speziell entwickelt wurde, um eine Abhängigkeitsauflösung des Modulpfads anzuzeigen, sollten Sie import.meta.resolve(moduleName) anstelle von new URL(moduleName, import.meta.url) für diese Anwendungsfälle verwenden, wann immer möglich.

Kein ECMAScript-Feature

import.meta.resolve() ist nicht im ECMAScript-Spezifikation für JavaScript-Module spezifiziert oder dokumentiert. Stattdessen definiert die Spezifikation das import.meta-Objekt, lässt jedoch alle seine Eigenschaften als "host-definiert". Der WHATWG HTML-Standard übernimmt dort, wo der ECMAScript-Standard aufhört, und definiert import.meta.resolve unter Verwendung der Modulspezifizierer-Auflösung.

Das bedeutet, dass import.meta.resolve() nicht von allen konformen JavaScript-Implementierungen implementiert werden muss. Allerdings kann import.meta.resolve() auch in nicht-browserbasierten Umgebungen verfügbar sein:

Deno implementiert Kompatibilität mit dem Browserverhalten.
Node.js implementiert ebenfalls die import.meta.resolve() Funktion, fügt jedoch einen zusätzlichen parent-Parameter hinzu, wenn Sie das --experimental-import-meta-resolve Flag verwenden.

Beispiele

Einen Pfad für den Worker()-Konstruktor auflösen

import.meta.resolve() ist besonders wertvoll für APIs, die einen Pfad zu einer Skriptdatei als Argument nehmen, wie der Worker() Konstruktor:

js
// main.js
const workerPath = import.meta.resolve("./worker.js");
const worker = new Worker(workerPath, { type: "module" });
worker.addEventListener("message", console.log);

js
// worker.js
self.postMessage("hello!");

Dies ist auch nützlich, um Pfade für andere Worker zu berechnen, wie Dienstmitarbeiter und geteilte Mitarbeiter. Allerdings, wenn Sie einen relativen Pfad verwenden, um die URL eines Dienstmitarbeiters zu berechnen, bedenken Sie, dass das Verzeichnis des aufgelösten Pfades standardmäßig seinen Registrierungsbereich bestimmt (obwohl ein anderer Bereich während der Registrierung angegeben werden kann).

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden