import.meta.resolve()

moduleName

Ein Zeichenkette, die ein potenziell importierbares Modul angibt. Dies kann ein relativer Pfad (zum Beispiel "./lib/helper.js"), ein einfacher Name (zum Beispiel "my-module") oder eine absolute URL (zum Beispiel "https://example.com/lib/helper.js") sein.

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

import.meta.resolve() ermöglicht einem Skript den Zugriff auf den Algorithmus zur Modul-Spezifizierer-Auflösung für einen Namen, wie folgt:

// 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 eine Auflösung durchführt und nicht versucht, den resultierenden Pfad zu laden oder zu importieren. (Der Erklärer zur Spezifikation beschreibt die Gründe für dieses Verhalten.) Daher ist der Rückgabewert derselbe 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.

Es unterscheidet sich von dynamischem Import, da, obwohl beide einen Modul-Spezifizierer als erstes Argument akzeptieren, import.meta.resolve() den Pfad zurückgibt, der importiert würde, ohne zu versuchen, auf diesen Pfad zuzugreifen. Daher sind die folgenden beiden im Wesentlichen derselbe Code:

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

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

Allerdings, auch wenn "./lib/helper.js" nicht erfolgreich importiert werden kann, wird das zweite Snippet erst auf einen Fehler stoßen, wenn der Importversuch in Zeile 2 erfolgt.

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

<!-- 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 dieses Snippet nicht versucht, moduleEntryPath zu importieren — ebenso wenig wie die Importkarte — wird unabhängig davon die aufgelöste URL ausgegeben, ob ./modules/my-module/index.js tatsächlich existiert.

Der URL()-Konstruktor akzeptiert ein zweites Basis-URL-Argument. Wenn das erste Argument ein relativer Pfad ist und die Basis-URL import.meta.url lautet, ähnelt die Wirkung import.meta.resolve().

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

Dies ist auch eine nützliche Ersetzungssyntax beim Anvisieren älterer Browser. Es gibt jedoch einige Unterschiede:

• import.meta.resolve() gibt eine Zeichenkette zurück, während new URL() ein URL-Objekt zurückgibt. Es ist möglich, href oder toString() auf der konstruierten URL zu verwenden, aber dies kann dennoch nicht dasselbe Ergebnis in einigen JavaScript-Umgebungen oder beim Einsatz von Tools wie Bundlern zur statischen Codeanalyse produzieren.
• import.meta.resolve() ist sich zusätzlicher Auflösungskonfigurationen bewusst, wie das Auflösen einfacher Modulnamen mit Importkarten, wie oben beschrieben. new URL() kennt keine Importkarten 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 einem Import) und berücksichtigen dies bei Funktionen wie Bündeln, Neuschreiben von Importen für verschobene Dateien, "Gehe zur Quelle"-Funktionalität usw. Da jedoch import.meta.resolve() weniger mehrdeutig ist und speziell darauf ausgelegt ist, eine Modulpfad-Auflösungsabhängigkeit anzuzeigen, sollten Sie import.meta.resolve(moduleName) statt new URL(moduleName, import.meta.url) für diese Anwendungsfälle verwenden, wo immer möglich.

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

Das bedeutet, dass import.meta.resolve() nicht obligatorisch 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 Funktion import.meta.resolve(), fügt jedoch einen zusätzlichen parent-Parameter hinzu, wenn Sie das --experimental-import-meta-resolve-Flag verwenden.

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

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

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

Dies ist auch nützlich, um Pfade für andere Worker zu berechnen, wie Service Worker und Shared Worker. Beachten Sie jedoch, dass, wenn Sie einen relativen Pfad zur Berechnung der URL eines Service Workers verwenden, das Verzeichnis des aufgelösten Pfades standardmäßig seinen Registrierungsbereich bestimmt (obwohl bei der Registrierung ein anderer Bereich angegeben werden kann während der Registrierung).

• import
• import()
• import.meta