import.meta.resolve()

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 wird.

Beschreibung

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

// 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 derselbe, unabhängig davon, ob der zurückgegebene Pfad einer Datei entspricht, die existiert, und unabhängig davon, ob diese Datei gültigen Code für ein Modul enthält. Dies ermöglicht es import.meta.resolve(), eine synchronisierte Operation zu sein.

Es unterscheidet sich von der dynamsichen Importfunktion, denn obwohl beide einen Modulspezifizierer als erstes Argument akzeptieren, gibt import.meta.resolve() den Pfad zurück, 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, selbst wenn "./lib/helper.js" nicht erfolgreich importiert werden kann, wird das zweite Code-Snippet erst dann auf einen Fehler stoßen, wenn es versucht, den Import in Zeile 2 durchzuführen.

Einfache Modulnamen

Sie können einen einfachen Modulnamen (auch als einfacher Modulspezifizierer bekannt) an import.meta.resolve() übergeben, solange die Modulauflösung für den Namen definiert ist. Zum Beispiel können Sie dies mithilfe einer Import Map innerhalb eines Browsers 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>

Wiederum, da dieses Snippet nicht versucht, moduleEntryPath zu importieren — und auch die Import Map nicht — es druckt die aufgelöste URL, unabhängig davon, ob ./modules/my-module/index.js tatsächlich existiert.

Vergleich mit new URL()

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

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

Dies ist auch eine nützliche Ersatzsyntax bei der Zielsetzung älterer Browser. Allerdings gibt es 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 führt möglicherweise nicht in allen JavaScript-Umgebungen oder bei der Verwendung von Werkzeugen wie Bundlern, die den Code statisch analysieren, zum exakt gleichen Ergebnis.
• import.meta.resolve() ist sich zusätzlicher Auflösungskonfigurationen bewusst, wie zum Beispiel der Auflösung einfacher Modulnamen mithilfe von Import Maps, wie oben beschrieben. new URL() kennt keine Import Maps und behandelt einfache Modulnamen wie 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 für Funktionen wie Bundling, Importumschreiben für verschobene Dateien, "Zum Quelltext gehen" Funktionalität usw. Da jedoch import.meta.resolve() weniger zweideutig ist und speziell entworfen wurde, um eine Abhängigkeit für die Modulpfadauflösung anzugeben, sollten Sie import.meta.resolve(moduleName) anstelle von new URL(moduleName, import.meta.url) für diese Anwendungsfälle wann immer möglich verwenden.

Kein ECMAScript-Feature

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

Das bedeutet, dass import.meta.resolve() nicht zwangsläufig von allen konformen JavaScript-Implementierungen umgesetzt werden muss. Allerdings kann import.meta.resolve() auch in Nicht-Browser-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.

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 erwarten, 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. Wenn Sie jedoch einen relativen Pfad verwenden, um die URL eines Service Workers zu berechnen, beachten Sie, dass das Verzeichnis des aufgelösten Pfads standardmäßig seinen Registrierungsbereich bestimmt (obwohl ein anderer Bereich während der Registrierung festgelegt werden kann).

Spezifikationen

Browser-Kompatibilität

Siehe auch

• import
• import()
• import.meta