No Login Data Private Local Save

Import Map Generator - Online Bare Specifiers Config

22
0
0
0

Import Map Generator

Generate <script type="importmap"> JSON for ES modules & bare specifiers

ES2024 Ready
QUICK PRESETS:
Bare Specifier Mappings

Scopes override mappings for specific path prefixes (e.g., /admin/).

No scopes defined. Click + to add one.

Generated JSON 
{
  "imports": {
    "example": "https://esm.sh/example"
  }
}
Frequently Asked Questions

An Import Map is a JSON object that allows you to control how JavaScript import statements resolve module specifiers. It lets you use bare specifiers like import React from "react" instead of full URLs like import React from "https://esm.sh/react@18". You include it in HTML via <script type="importmap">.

Bare specifiers are import paths that don't start with /, ./, or ../ — like "react", "lodash-es", or "@scope/pkg". Browsers need import maps to resolve these to actual URLs. Without an import map, bare specifiers will throw a resolution error.

Place the generated JSON inside a <script type="importmap"> tag in your HTML <head>, before any <script type="module"> tags. Example:
<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@18.2.0"
  }
}
</script>
<script type="module">
  import React from "react"; // Now works!
</script>

Import Maps are supported in all modern browsers: Chrome 89+, Edge 89+, Firefox 108+, Safari 16.4+, and Opera 75+. For older browsers, you can use the ES Module Shims polyfill.

The best CDNs for ES modules are: esm.sh (fast, auto-bundling), Skypack (optimized ESM), jsDelivr (global CDN with /+esm), and unpkg (with ?module). esm.sh is generally recommended for its speed and smart dependency handling.

Scopes allow you to define different mappings for specific path prefixes. For example, you could map "react" to version 18 for most pages but override it to version 17 for /legacy/ paths. This is useful for incremental upgrades or isolated sections of a site.

Node.js has experimental support for Import Maps via the --import flag or custom loaders (Node 20.6+). However, Import Maps are primarily a browser feature. For Node.js, you typically rely on package.json and node_modules resolution instead.

package.json is used by Node.js and bundlers (Webpack, Vite, Rollup) to resolve dependencies at build time. Import Maps resolve dependencies at runtime in the browser, without any build step. They serve different purposes but can complement each other in hybrid setups.
🔧 Related Tools