import.meta.resolve()

import.meta.resolve() ist eine eingebaute Funktion, die auf dem import.meta-Objekt eines JavaScript-Moduls definiert ist und einen Modulspezifizierer zu einer URL auflöst, wobei die URL des aktuellen Moduls als Grundlage dient.

Syntax

js
import.meta.resolve(moduleName)

Parameter

moduleName

Ein String, der ein potenziell importierbares Modul angibt. 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 werden würde, wenn das Argument an import() übergeben wird.

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 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. Dies ermöglicht, dass import.meta.resolve() eine synchron ablaufende Operation ist.

Es unterscheidet sich vom dynamischen Import, da, obwohl beide einen Modulspezifizierer als erstes Argument akzeptieren, import.meta.resolve() den Pfad zurückgibt, der importiert werden würde, ohne irgendeinen Versuch zu unternehmen, auf diesen Pfad zuzugreifen. Daher sind die folgenden beiden 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));

Auch wenn "./lib/helper.js" nicht erfolgreich importiert werden kann, wird das zweite Beispiel keinen Fehler verursachen, bis 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. Beispielsweise können Sie dies mit einer Import Map innerhalb eines Browsers 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 dieses Beispiel jedoch nicht versucht, moduleEntryPath zu importieren — das tut auch die Import Map nicht — wird die aufgelöste URL ausgegeben, 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 Ersatzsyntax beim Anvisieren älterer Browser. 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 der konstruierten URL zu verwenden, aber dies kann in einigen JavaScript-Umgebungen oder beim Einsatz von Tools wie Bundlern zur statischen Analyse des Codes möglicherweise nicht das genau gleiche Ergebnis liefern.
  • import.meta.resolve() ist sich zusätzlichen Auflösungskonfigurationen bewusst, wie zum Beispiel dem Auflösen einfacher Modulnamen mit Import Maps, wie oben beschrieben. new URL() ist sich Import Maps 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, Umschreiben von Importen bei verschobenen Dateien, "Gehe zur Quelle"-Funktionalität usw. Da import.meta.resolve() jedoch weniger mehrdeutig ist und speziell zur Anzeige einer Modulpfadauflösungsabhängigkeit entwickelt wurde, sollten Sie import.meta.resolve(moduleName) anstelle von new URL(moduleName, import.meta.url) für diese Anwendungsfälle nach Möglichkeit 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 jedoch alle seine Eigenschaften als "hostdefiniert". Der WHATWG HTML-Standard nimmt den Faden dort auf, wo die ECMAScript-Spezifikation aufhört, und definiert import.meta.resolve mit seinem Modulspezifizierer-Auflösungsalgorithmus.

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

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 verwenden, wie den 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 Service Workers und Shared Workers. Beachten Sie jedoch, dass, wenn Sie einen relativen Pfad verwenden, um die URL eines Service Workers zu berechnen, das Verzeichnis des aufgelösten Pfades standardmäßig seinen Registrierungsbereich bestimmt (obwohl während der Registrierung ein anderer Bereich angegeben werden kann während der Registrierung).

Spezifikationen

Specification
HTML
# import-meta-resolve

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
import.meta.resolve

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

Siehe auch