Import maps
Learn to resolve bare module names with import maps.
What are import maps?
An import map maps bare module names (like 'lodash') to real addresses. It is given to the browser inside a <script type="importmap"> tag.
This lets you write short names in import statements instead of long addresses. The browser turns the name into an address using the map.
Import maps make it easy to load modules from a CDN in small projects without a bundler.
Import map syntax
An import map holds an object named imports; the keys are bare names and the values are addresses. The browser reads this object to resolve imports.
"imports": {
"lodash": "https://cdn.example.com/lodash.js"
}Once the mapping is set, you can write import _ from 'lodash'; the browser finds the address.
Exercise Write an import map
Write an import map: inside a <script type="importmap"> tag, include an imports object that maps "lodash" to "https://cdn.example.com/lodash.js".
Show example solution
Open script type=importmap, add the imports object and the lodash mapping.
Example solution:
<script type="importmap">
{
"imports": {
"lodash": "https://cdn.example.com/lodash.js"
}
}
</script>Test yourself
-
What do import maps resolve?
- CSS loading
- bare module names
- string concatenation
- array sorting
Show answer
bare module names — Correct! Import maps turn bare module names into addresses.
-
Complete the import map script type
<script type="____">Show answer
<script type="importmap"> -
Match the concepts
- import maps
- resolves bare names
- type=importmap
- the map script
- imports
- name mappings
- CDN URL
- module source