Importmap

Justin Coyne

Stanford Libraries

code4lib - Mar 2023

A newish feature in your web browser

An import map is a JSON object that allows developers to control how the browser resolves module specifiers when importing JavaScript modules.

Huh?


  <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.esm.min.js"
      }
    }
  </script>       

      

  <script type="module">
    import bootstrap from 'bootstrap'
  
    new bootstrap.Popover(document.getElementById('popoverButton'))
  </script>

Why?

No need for transpiling and bundling
(webpacker/rollup/esbuild)

Easier debugging

Many small files offers better caching dynamics.

Dogfooding

Caveat

Not yet supported on Safari 16.3 (but will be in 16.4; not yet released)

Polyfill:

<script async
src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"
crossorigin="anonymous"></script>
Links:

Fin.