インポートマップ
ESMスクリプトを使用すると、Import Mapsを使ってプロジェクト内のモジュール指定子を解決する方法を制御できます。Import Mapsを使用すると、エイリアスを定義したり、モジュールパスを再マッピングしたりできるため、特に共有ライブラリや内部ツールを扱う際に、よりクリーンで柔軟なインポートを作成できます。
例えば、次のように記述する代わりに:
import config from '../../../utils/config.js';
インポートマップを使用して、これを次のように簡略化できます:
import config from 'utils/config.js';
インポートマップを作成する
設定パネルで「Import Map」セクションを見つけます。「Create Default」をクリックすると、エディターがアセットレジストリに新しいインポートマップを作成し、それをプロジェクトに割り当てます。
コードエディターでファイルを開きます。例えば「/utils/math.mjs」のようなモジュールを「math」にマッピングしたい場合、インポートマップを次のように更新します:
{
"imports": {
"math": "./utils/math.mjs"
}
}
これでコード内で import x from "math"
を呼び出すと、あなたのモジュールに解決されます。
ヒント
Import Mapsはnpmパッケージのショートハンドとしても使用できます。例えば、"tweenjs": "https://esm.sh/tween.js"
を追加すると、CDN上のtween.jsに解決されます。
知っておくべきこと
- Import MapsはESMビルドにのみ適用されます。クラシックスクリプト単体ではサポートされていません。
- マップで定義するパスは、プロジェクトに存在するファイルと一致するか、有効な外部URLを指している必要があります。
- 一度にアクティブにできるインポートマップは1つだけです。
- 外部モジュール(例:CDNから)を使用している場合、それらがESM互換であり、CORSでアクセス可能であることを確認してください。
Import Mapsを使用するタイミング
- 大規模プロジェクトで脆弱な相対パスを避けるため。
- 共有ユーティリティのためにクリーンでエイリアスベースのパスを作成するため。
- サードパーティの外部モジュールをローカルにインストールせずに参照するため。
インポートマップを使用すると、特にプロジェクトが成長するにつれて、コードベースを整理し、保守を容易に保つのに役立ちます。