Import maps のテスト

1. このページの目的

このページで、Import maps を試す。

2. デモ

静的インポートでモジュールを読み込み、文字列を表示する。

動的インポートでモジュールを読み込み、文字列を表示する。

3. ソースコード

index.html の抜粋

<p class="demo-subtitle">静的インポートでモジュールを読み込み、文字列を表示する。</p>
<div class="demo" id="demo-area-static"></div>

<p class="demo-subtitle">動的インポートでモジュールを読み込み、文字列を表示する。</p>
<div class="demo" id="demo-area-dynamic"></div>

<script type="importmap">
  //----------------------------
  // インポートマップを定義する
  //----------------------------
  {
    "imports": {
      "foo": "./foo.1111.js"
    }
  }
</script>

<script type="module">
  //----------------
  // 静的インポート
  //----------------
  import foo from 'foo';
  foo('demo-area');

  //----------------
  // 動的インポート
  //----------------
  import('foo')
    .then((module) => {
      console.log(module.default);
      module.default('demo-area-dynamic');
    });
</script>
  1. <script type="importmap"> 内で「呼び出し用の名前」と「実際のファイルパス」の対応を記述しておく。
  2. <script type="module"> 内で「呼び出し用の名前」を使ってモジュールをインポートする。

foo.1111.js

export default function(id) {
  const elm = document.querySelector(`#${id}`);
  elm.textContent = 'This is foo.1111.js';
}

4. コメント

5. 参考