Import Maps to simplify Browser Based ESM

Tue, 12 Dec 2023 08:34:47 +0000

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';

browser on Barney Parker

Import Maps to simplify Browser Based ESM