@ledsun blog

無味の味は佳境に入らざればすなわち知れず

importmapのサンプル

JavaScript 技

Google Chorme、Firefox、Safariのような、現代的なブラウザは、<script type="module">を使ってESMモジュールが読み込めます。さらに、import文を使って依存モジュールを解決できます。例えば、次のHTMLではvueが動きます。

<html>

<body>
  <div id="container">
    The Planet Wercury was formed {{ age }} age.
  </div>
  <script type="module">
    import Vue from 'https://unpkg.com/vue@2.6.11/dist/vue.esm.browser.min.js';

    new Vue({
      el: '#container',
      data: {
        age: '4.503 billion years'
      }
    })
  </script>
</body>

</html>

しかし、ブラウザで依存するモジュールを解決するにはimport文にURLを書く必要があります。

import Vue from 'https://unpkg.com/vue@2.6.11/dist/vue.esm.browser.min.js';

一方、Node.jsやWebpackで読み込むESMモジュールを書くときは

import Vue from 'vue';

のように書きたいです。このギャップを埋めるための仕様がimportmapです。その名の通り、import文で使う名前に別名をつけることができます。 importmapを使ったの例が次です。

<html>

<head>
  <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@2.6.11/dist/vue.esm.browser.min.js"
        }
      }
  </script>
</head>

<body>
  <div id="container">
    The Planet Wercury was formed {{ age }} age.
  </div>
  <script type="module">
    import Vue from 'vue';

    new Vue({
      el: '#container',
      data: {
        age: '4.503 billion years'
      }
    })
  </script>
</body>

</html>

このHTMLはChrome 89以降でしか動きません。

参考

比較用、古典なscriptタグを使ったモジュール読込の例

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="container">
    The Planet Wercury was formed {{ age }} age.
  </div>
  <script>
    new Vue({
      el: '#container',
      data: {
        age: '4.503 billion years'
      }
    })
  </script>
</body>

</html>