A Quick Look at Import Maps

Published ....
Last modified ....

Share this post on Bluesky See discussion on Bluesky

I know Import Maps aren't all that new, however I've recently been messing around with them in a demo app that is natively using ESModules and it's such a nice developer experience!

For those that aren't aware, import maps allow you to configure/tell the browser how it should resolve bare specifiers when it encounters them. Here's an example in practice:

<!-- Import Map -->
<script type="importmap">
  {
    "imports": {
      "<bare-specifier>": "<where-to-resolve-that-import-from>",
      "react": "https://esm.sh/react@19.0.0"

import { createElement } from "react";

let el = createElement("marquee");

{
  "imports": {
    "#framework/*": "./framework/*.mjs"
  }
}

// will be effectively the same as:
// import {foo} from './framework/foo.mjs'
import { foo } from "#framework/foo";

A Quick Look at Import Maps

A Quick Look at Import Maps

Tags:

Bluesky Post and Comments:

Related Posts

Web Development

Development

Node.js

Related Posts

Web Development

Development

Node.js

A Quick Look at Import Maps