Control the behavior of JavaScript imports with Import Maps

When importing ES Modules (on the web), you need to refer to them using their full filenames or URLs:

import moment from "/js/moment/moment.js";
import { partition } from "/js/lodash-es/lodash.js";

In a Node environment however, you would write the snippet above as follows:

import moment from "moment";
import { partition } from "lodash";

(Node will map things to the /node_modules folder all by itself)

👉 So depending on where you run your code, your import statements need to change. Meh.

~

Thankfully Import Maps provide a solution to this. They allow you to specify which file/URL should be loaded when importing a package.

{
  "imports": {
    "moment": "/js/moment/moment.js",
    "lodash": "/js/lodash-es/lodash.js"
  }
}

With this in place the browser can handle import { partition } from "lodash" just fine, as it will load the file /js/lodash-es/lodash.js. 🎉

~

An import map is a tad of JSON file which you need to put it in a script[type="importmap"] element:

<script type="importmap">
{
  "imports": {
    "moment": "/js/moment/moment.js",
    "lodash": "/js/lodash-es/lodash.js"
  }
}
</script>

<script type="importmap" src="import-map.importmap"></script>

application/importmap+json

For more advanced usage, it’s also possible to add scoping.

~

These Import Maps sure are a very welcome addition. Unfortunately browser support is currently limited to Chrome only.

Let’s hope other browsers follow suit soon. Relevant bugs to track:

• Safari: https://bugs.webkit.org/show_bug.cgi?id=220823
• Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1688879

~

To help spread the contents of this post, feel free to retweet its announcement tweet:

Control the behavior of JavaScript imports with Import Maps

🔗 https://t.co/ZLA77prDFY

🏷 #EsModules #import #javascript pic.twitter.com/ZrzakJQ4tn

— Bram.us (@bramusblog) March 3, 2021

~