All 10 ES Modules questions
More in ES Modules
How do dynamic imports (import()) differ from static import statements? Why are ES Module imports 'hoisted' and evaluated before the rest of the module's code runs? What does 'live binding' mean for ES Module exports, and how does it differ from CommonJS? How does top-level await work, and what constraint does it place on modules that import that module? Why can circular module imports (Module A imports B, which imports A) cause subtle bugs?
Advertisement
JavaScript › ES Modules

What are import maps and what problem do they solve for browser-native ES Modules?

Advanced

Answer

Import maps let you use bare specifiers (like import 'lodash') directly in the browser without a bundler, by mapping those short names to actual URLs in a <script type='importmap'> block — otherwise browsers require full relative or absolute URLs.
<script type="importmap">
{
  "imports": { "lodash": "https://cdn.example.com/lodash.js" }
}
</script>
<script type="module">
  import _ from 'lodash';
</script>
Real-world example Running a bundler-free, browser-native ES Module app while still using clean package-style import names.

Common follow-ups: Do all browsers support import maps natively?

Package Management Bundlers & Transpilation (npm Webpack/Vite Babel)
All 10 ES Modules questions