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": "",
      "react-dom": "",
      "htm": ""

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'

135 Words

2023-12-12 08:34 +0000