v133 · modules

Environment override

A base import map ships with the HTML. A second override map layers on top, swapping the same specifiers to point at dev, staging, or prod endpoints — same specifier, different module. Multiple import maps are the first time this pattern is possible without bundler transforms.

Feature detection: checking…

Choose environment — watch the override map update and the merged resolution change:

base import map #1 · always present

override map #2 · production

merged resolution (what the browser uses) env: production

Type a module specifier — see what it resolves to in this environment

Try: utils/format, api/client, analytics, auth/session

→

—

Resolution log:

Switch environments or resolve a specifier to see entries.

<!-- base import map — ships with the HTML -->
<script type="importmap">
{
  "imports": {
    "utils/": "/lib/utils/",
    "api/client": "/lib/api/client-prod.js",
    "analytics": "/lib/analytics/prod.js"
  }
}
</script>

<!-- override map — injected by the build pipeline or feature flag -->
<script type="importmap">
{
  "imports": {
    "api/client": "/lib/api/client-dev.js",
    "analytics": "/lib/analytics/stub.js",
    "debug-tools": "/lib/debug/devtools.js"
  }
}
</script>

<!-- Specifiers that appear in both maps use the LAST map's value.
     Specifiers only in the base map keep the base value.
     Specifiers only in the override map are added.          -->

Environment override

see also

references