Import maps for JavaScript modules

In JavaScript, an import map is a JSON object that lets you control how the browser resolves module specifiers when importing JavaScript modules. Import maps are particularly useful for lightweight projects that don’t warrant a build step.

For example, my friend Chris Ferdinandi wrote a tiny utility library for building reactive state-based UI. It’s called Reef. In the installation guide, Chris shows that you can import directly from the JavaScript module build on the jsDelivr CDN:

import {
	component,
	store
} from "https://cdn.jsdelivr.net/npm/reefjs@12/dist/reef.es.min.js";

This is fine, but wouldn’t it be nice if you could just import from "reef" as if you were using a build step?

import { component, store } from "reef";

With an import map, you can do just that! Here’s what it looks like:

<script type="importmap">
	{
		"imports": {
			"reef": "https://cdn.jsdelivr.net/npm/reefjs@12/dist/reef.es.min.js"
		}
	}
</script>

With that, the browser knows where to look when you import from "reef". I made a demo on StackBlitz so you can see it in action.

I first saw import maps used in the Vue.js quick start guide. They’re supported in all modern browsers, although they’re still relatively new. They’ve been around since Chrome 89, Firefox 108, and Safari 16.4. I recommend checking the full browser support table on Can I Use.

For more on import maps, check out JavaScript modules > Importing modules using import maps in the MDN Web Docs.