import.meta.resolve() は JavaScript モジュールのimport.meta オブジェクトで定義されている組み込み関数で、現在のモジュールの 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.jsconst helperPath = import.meta.resolve("./lib/helper.js");console.log(helperPath); // "https://example.com/lib/helper.js"

import.meta.resolve() は解決を行うだけであり、結果のパスをロードしたりインポートしようとはしないことに注意してください。そのため、返されたパスが存在するファイルに対応しているかどうかや、そのファイルがモジュールの有効なコードを含んでいるかどうかに関係なく、その返値は同じです。これにより、import.meta.resolve() は同期的な操作であることができます。

これは動的インポートとは異なります。どちらも第 1 引数としてモジュール指定子を受け取りますが、import.meta.resolve() はそのパスにアクセスしようとすることなく、インポートされるであろうパスを返します。したがって、次の 2 つは実質的に同じコードです。

// アプローチ 1console.log(await import("./lib/helper.js"));// アプローチ 2const helperPath = import.meta.resolve("./lib/helper.js");console.log(await import(helperPath));

しかし、"./lib/helper.js" が正常にインポートできなくても、 2 行目のスニペットがインポートを実行するまでエラーは発生しません。

ベアモジュール名

その名前に対してモジュール解決が定義されていれば、import.meta.resolve() に素のモジュール名（素のモジュール指定子としても知られています）を渡すことができます。例えば、ブラウザー内でインポートマップを使って定義することができます。

<!-- 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 をインポートしようとしないので、インポートマップもインポートしません。

new URL() との比較

URL() コンストラクターは 2 番目のベース 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 オブジェクトを返します。構築されたURL に対してhref やtoString() を使用することも可能ですが、 JavaScript の環境によっては、あるいはバンドラーのようなツールを使用してコードを静的に解析する場合には、まったく同じ結果にならないことがあります。
• import.meta.resolve() は、上で説明したように、インポートマップを使用したベアモジュール名の解決など、追加の解決設定を認識します。新しい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" への依存関係（インポートに似ている）として認識し、バンドル、移動したファイルのインポートの書き換え、"go to source" 機能などの機能のためにこれを考慮します。しかし、import.meta.resolve() は曖昧さが少なく、特にモジュールパスの解決依存を示すように設計されているため、これらの使用例では可能な限りimport.meta.resolve(moduleName) をnew URL(moduleName, import.meta.url) の代わりに使用する必要があります。

ECMAScript の機能ではない

import.meta.resolve() は JavaScript モジュールのECMAScript 仕様書の一部として定義も文書化もされていません。その代わりに、この仕様書import.meta オブジェクトを定義していますが、そのすべてのプロパティを "ホスト定義" のままにしています。 WHATWG HTML 標準は ECMAScript 標準が残したものをピックアップし、モジュール指定子の解決 を使ってimport.meta.resolve を定義しています。

つまり、import.meta.resolve() はすべての適合する JavaScript 実装で実装される必要はありません。しかし、import.meta.resolve() はブラウザー以外の環境でも利用できるかもしれません：

• Deno はブラウザー動作との互換のものを実装しています。
• Node.js もimport.meta.resolve() 関数を実装していますが、--experimental-import-meta-resolve フラグを使用する場合、追加のparent 引数が提供されます。

例

Worker() コンストラクターのパスを解決

import.meta.resolve() は、Worker() コンストラクターのように、スクリプトファイルへのパスを引数として受け取る API で特に有用です。

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

// worker.jsself.postMessage("hello!");

これは、サービスワーカー や共有ワーカー など、他のワーカーのパスを計算するのにも便利です。ただし、相対パスを使用してサービスワーカーの URL を計算する場合、既定では解決されたパスのディレクトリーが登録スコープを決定することに注意してください（ただし、登録時に別のスコープを指定することもできます）。

仕様書

ブラウザーの互換性

関連情報

• import
• import()
• import.meta