JS: importmap

What is importmap

Importmap lets you give a name to module.

It is convenient to import module by name, instead of using the url or path for the Module Specifer

this is convenient because the module specifer url may be long, and you might place it in multiple places by different coder in a team.

a unified simple name makes it easier.

Example of long module url

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.7/underscore-min.js

Syntax of Importmap

<script type="importmap">importmap_json</script>

Importmap JSON Format

{
  "imports": {
   "surface": "https://example.com/geometry/surface.js",
   "curves": "./curves.js",
   "underscore": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.7/underscore-min.js"
  }
 }

Example

<script type="importmap">
 {
  "imports": {
   "surface": "https://example.com/geometry/surface.js",
   "curves": "./curves.js",
   "underscore": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.7/underscore-min.js"
  }
 }
</script>

<script type="module" src="surface"></script>
<script type="module" src="curve"></script>