Import Maps to simplify Browser Based ESM

Import maps let you use short names when importing packages in the browser rather than using script tags.

In order to mark a script as an import map, the script tag needs a type attribute with a value of importmap.

The contents should be an object with a single attribute of imports which is an object where the keys are the name you will use to refer to a package, and the value is the URL to the package. e.g:

<script type="importmap">
  {
    "imports": {
      "React": "https://esm.sh/react@18.2.0",
      "react-dom": "https://esm.sh/react-dom@18.2.0",
      "htm": "https://esm.sh/htm@3.1.1"
    }
  }
</script>

This should be placed in the head section. The parser reads the import map, but doesn’t preload the imports. instead it waits until a package gets imported, and then translates it to its real url for loading:

import htm from 'htm'