Import map

This module allows you to add an import map to your website.
This can be used to allow JS imports without having to specify the full path to the JS file.

(There is a discussion about adding this to Drupal core: #3398525: Add an API for importmaps)

For example, if you have this in your libraries.yml file:

foo:
  js:
    js/foo.js: { attributes: { data-importmap-name: 'foo' } }

It will generate this import map:

<script type="importmap">
{"imports":{"foo":"\/modules\/custom\/foo\/js\/foo.js?s3pik6"}}
</script>

And you can then use import { foo } from "foo"; in your JS to import this file.
(Note that JS scripts that use import need to have the type="module" attribute.)

You do not have to attach libraries that are in the import map, they will be downloaded automatically by the browser when using import.

Preloading modules

You can also preload JS modules like this:

foo:
  js:
    js/foo.js: { attributes: { data-importmap-name: 'foo', data-importmap-preload: true } }

This will make the browser preload the JS module so it can already be available when executing the import.