Import maps の使い方

投稿日：2021年11月16日更新日：2021年11月17日

1. Import maps とは？

「JavaScript の実際のファイル名」と「そのファイルを import するときに指定する名前」を切り離すことができます（2つの対応情報はJSON形式で用意しておきます）。
これにより、ファイル名が後から変わっても（ファイル名にバージョン番号が含まれている場合など）、一度記述した import 文を変更する必要はなくなります。（JSON形式による対応情報側のみを変えます）
npm のパッケージ名のようなシンプルな名前でインポートできます。
静的インポート、動的インポートのどちらでも使えます。

Import maps を使う手順は以下です。

(1) <script tyle="importmap"> というタグの中に、モジュールファイルのURLと名前の対応を記述します。

<script type="importmap">
{
  "imports": {
    "foo": "./foo.12345.js"
  }
}
</script>

ここでは、”./foo.12345.js” という相対URLで表されたファイルに対して、”foo” という名前をつけています（マッピング）。

(2) (1) でつけた名前を使って import します。

静的インポートの場合

<script type="module">
import foo from 'foo';

// foo を使った処理を記述する
</script>

動的インポートの場合

<script type="module">
import('foo')
  .then((foo) => {
    // foo を使った処理を記述する
  });
</script>

2021年11月現在、Firefox や Safari では使えないようですが、以下のページで polyfill (shim) が用意されています。

Releases ページからファイルをダウンロードして、<script async src="XXXXXX">タグで読み込むか、CDN を利用します。

もとのファイル名にバージョン番号やハッシュ等の「後々変化する文字列」が含まれている場合であっても、固定されたシンプルな名前でインポートができます（npm のパッケージをインポートするように）。
JavaScriptモジュールファイルがブラウザによってキャッシュされている場合であっても、「名前」に対する「もとのファイルのURL」を変えれば、ブラウザはちゃんと読み込み直してくれます。

WICG/import-maps
- How to control the behavior of JavaScript imports
guybedford/es-module-shims
- Shims for new ES modules features on basic modules support in browsers
Import maps | Can I use…
JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
- 2021-11-15

📂-Web

執筆者：labo