Import maps: bare specifiers without a bundler

The bare specifier problem

import _ from "lodash";   // works in Node; FAILS in the browser

The browser doesn't know where "lodash" lives. It needs a full URL. Bundlers solve this by rewriting the specifier to a real path during build.

Import maps — the browser-native fix

Shipped in Chrome 89, Safari 16.4, Firefox 108 (and now all evergreens):

<script type="importmap">
{
  "imports": {
    "lodash": "https://cdn.skypack.dev/lodash@4.17.21",
    "lodash/debounce": "https://cdn.skypack.dev/lodash@4.17.21/debounce"
  }
}
</script>

<script type="module">
  import { debounce } from "lodash";   // now resolves to the URL above
</script>

You declare the mapping once; every module specifier respects it. Single source of truth for "what does lodash mean."

When this matters

• Tiny apps + tools — a 50-line demo, an internal admin page. No build step, deploy a single HTML file.
• Deno / Bun — same syntax; import map is the production way.
• Educational — exactly what this lesson does. No Vite, no node_modules, just a browser.

For real apps with hundreds of dependencies, a bundler still wins on tree-shaking, code splitting, and minification. Import maps are the right answer for the small end of the spectrum.