import.meta.resolve()

import.meta.resolve() является встроенной функцией, определённой в объекте import.meta модуля JavaScript, которая преобразует спецификатор модуля в URL, используя URL текущего модуля в качестве базового.

Синтаксис

import.meta.resolve(moduleName)

Параметры

moduleName

Строка, которая указывает потенциально импортируемый модуль. Это может быть относительный путь (например, "./lib/helper.js"), чистое имя (например, "my-module") или абсолютный URL (например, "https://example.com/lib/helper.js").

Возвращаемое значение

Возвращает строку, соответствующую пути, который был бы импортирован, если бы аргумент был передан в import().

Описание

import.meta.resolve() позволяет скрипту получить доступ к алгоритму преобразования спецификатора модуля для имени, следующим образом:

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

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

Обратите внимание, что import.meta.resolve() выполняет только преобразование и не пытается загрузить или импортировать результирующий путь. Следовательно, его возвращаемое значение одинаково независимо от того, соответствует ли возвращаемый путь существующему файлу и независимо от того, содержит ли этот файл действительный код для модуля. Это позволяет import.meta.resolve() быть синхронной операцией.

Оно отличается от динамического импорта (dynamic import), поскольку, хотя оба принимают спецификатор модуля в качестве первого аргумента, import.meta.resolve() возвращает путь, который был бы импортирован, не предпринимая никаких попыток доступа к этому пути. Следовательно, следующие два фрагмента кода по сути одинаковы:

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

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

Однако, даже если "./lib/helper.js" не может быть успешно импортирован, второй фрагмент не выдаст ошибку, пока не попытается выполнить импорт во второй строке.

Чистые имена модулей (Bare module names)

Вы можете передать чистое имя модуля (также известное как спецификатор чистого модуля) в import.meta.resolve(), если для этого имени определено преобразование модуля. Например, вы можете определить это с помощью карты импорта (import map) в браузере:

<!-- 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>

Опять же, поскольку этот фрагмент не пытается импортировать moduleEntryPath — и карта импорта тоже не пытается — он выводит преобразованный URL независимо от того, существует ли ./modules/my-module/index.js на самом деле.

Сравнение с new URL()

Конструктор URL() принимает второй аргумент — базовый URL. Когда первый аргумент является относительным путём, а базовый URL — import.meta.url, эффект схож с import.meta.resolve().

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

Это также полезный синтаксис для замены при таргетинге на старые браузеры. Однако есть некоторые различия:

• import.meta.resolve() возвращает строку, тогда как new URL() возвращает объект URL. Можно использовать href или toString() для сконструированного URL, но это может не дать в точности тот же результат в некоторых средах JavaScript или при использовании таких инструментов, как сборщики (bundlers), для статического анализа кода.
• import.meta.resolve() учитывает дополнительные конфигурации преобразования, такие как преобразование чистых имён модулей с использованием карт импорта, как описано выше. new URL() не знает о картах импорта и рассматривает чистые имена модулей как относительные пути (т.е. new URL("my-module", import.meta.url) означает new URL("./my-module", import.meta.url)).

Некоторые инструменты распознают new URL("./lib/helper.js", import.meta.url).href как зависимость от "./lib/helper.js" (подобно импорту) и учитывают это для таких функций, как сборка (bundling), перезапись импорта для перемещённых файлов, функциональность "перейти к источнику" и т. д. Однако, поскольку import.meta.resolve() менее двусмысленно и специально разработано для указания зависимости от преобразования пути модуля, вам следует использовать import.meta.resolve(moduleName) вместо new URL(moduleName, import.meta.url) для этих вариантов использования везде, где это возможно.

Не является функцией ECMAScript

import.meta.resolve() не указан и не задокументирован как часть спецификации ECMAScript для модулей JavaScript. Вместо этого спецификация определяет объект import.meta, но оставляет все его свойства "определёнными хостом". Стандарт WHATWG HTML продолжает работу с того места, где остановился стандарт ECMAScript, и определяет import.meta.resolve с использованием своего преобразования спецификатора модуля.

Это означает, что реализация import.meta.resolve() не является обязательной для всех совместимых реализаций JavaScript. Однако import.meta.resolve() может быть доступен и в средах, отличных от браузеров:

• Deno реализует совместимость с поведением браузера.
• Node.js также реализует функцию import.meta.resolve(), но добавляет дополнительный параметр parent, если вы используете флаг --experimental-import-meta-resolve.

Примеры

Преобразование пути для конструктора Worker()

import.meta.resolve() особенно ценен для API, которые принимают путь к файлу скрипта в качестве аргумента, например, для конструктора Worker():

// 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!");

Это также полезно для расчёта путей к другим воркерам, таким как service workers (сервисные воркеры) и shared workers (общие воркеры). Однако, если вы используете относительный путь для вычисления URL сервисного воркера, имейте в виду, что каталог преобразованного пути по умолчанию определяет его область регистрации (registration scope) (хотя другую область можно указать во время регистрации).

Спецификации

Совместимость с браузерами

Смотрите также

• import
• import()
• import.meta