import.meta.resolve()

moduleName

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

Gibt einen String zurück, der 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 Modul-Spezifizierer-Auflösungsalgorithmus für einen Namen, beispielsweise 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 immer gleich, unabhängig davon, ob der zurückgegebene Pfad zu einer Datei gehört, die existiert, und unabhängig davon, ob diese Datei gültigen Code für ein Modul enthält. Dies erlaubt import.meta.resolve() eine synchronisierte Operation zu sein.

Es unterscheidet sich vom dynamischen Import, denn obwohl beide einen Modul-Spezifizierer als erstes Argument akzeptieren, gibt import.meta.resolve() den Pfad zurück, der importiert würde, ohne einen Versuch zu unternehmen, 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));

Auch wenn "./lib/helper.js" nicht erfolgreich importiert werden kann, wird das zweite Code-Stück erst dann auf einen Fehler stoßen, wenn es versucht, den Import in Zeile 2 durchzuführen.

Sie können einen Bare Modulnamen (auch bekannt als Bare 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 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>

Da in diesem Code-Stück nicht versucht wird, moduleEntryPath zu importieren — ebenso wenig wie die Importkarte — wird die aufgelöste URL ausgegeben, unabhängig davon, ob ./modules/my-module/index.js tatsächlich existiert.

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, ähnelt die Wirkung der von import.meta.resolve().

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 das kann in einigen JavaScript-Umgebungen oder beim Einsatz von Tools wie Bundlern zur statischen Code-Analyse trotzdem nicht dasselbe Resultat produzieren.
• import.meta.resolve() kennt zusätzliche Auflösungskonfigurationen, wie z.B. das Auflösen von Bare Modulnamen mithilfe von Importkarten, wie oben beschrieben. new URL() kennt Importkarten nicht und behandelt Bare 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 für Funktionen wie Bündelung, Umschreiben von Importen bei verschobenen Dateien, Funktionalität wie "Zur Quelle gehen" usw. Da import.meta.resolve() jedoch weniger Mehrdeutigkeiten aufweist und speziell entwickelt wurde, um eine Abhängigkeit von der Modulpfadauflösung anzuzeigen, sollten Sie import.meta.resolve(moduleName) anstelle von new URL(moduleName, import.meta.url) für diese Anwendungsfälle wann immer möglich verwenden.

import.meta.resolve() wird 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 "host-definiert". Der WHATWG HTML-Standard setzt da an, wo der ECMAScript-Standard aufhört, und definiert import.meta.resolve unter Verwendung seiner Modul-Spezifizierer-Auflösung.

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

• Deno implementiert Kompatibilität mit dem Verhalten von Browsern.
• Node.js implementiert auch die Funktion import.meta.resolve(), fügt aber einen zusätzlichen parent-Parameter hinzu, wenn Sie das Flag --experimental-import-meta-resolve 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. Wenn Sie jedoch einen relativen Pfad verwenden, um die URL eines Service-Workers zu berechnen, bedenken Sie, dass das Verzeichnis des aufgelösten Pfads standardmäßig dessen Registrierungsscope bestimmt (obwohl ein anderer Scopewährend der Registrierung angegeben werden kann).

• import
• import()
• import.meta