Import Maps 是浏览器原生支持的模块路径映射机制，通过 <script type="importmap"> 中的 JSON 配置将裸模块名（如 react）映射到实际 URL 或相对路径，仅影响 type="module" 脚本中的裸 specifier 导入，须置于 <head> 中且在模块脚本之前。
ES Module 的 Import Maps 是浏览器原生支持的模块路径映射机制，无需构建工具即可在 HTML 中直接定义模块别名，让 import 语句更简洁、可维护。它本质是一段 JSON 配置，告诉浏览器“某个导入名”实际对应哪个 URL。
在 HTML 中声明 Import Maps
把 <script type="importmap"> 放在页面 <head> 中，用标准 JSON 格式写入 imports 映射表：
<script type="importmap">
{
"imports": {
"react": "https://cdn.jsdelivr.net/npm/react@18.2.0/+esm",
"lodash": "https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/+esm",
"utils": "./src/utils.js",
"@shared/api": "./src/shared/api.js"
}
}</script>
之后你就能在任何 ES Module 脚本中这样写：
import { useState } from 'react';
import debounce from 'lodash/debounce';
import { fetchUser } from 'utils';
import { callApi } from '@shared/api';
注意：Import Maps 只影响顶层 import 语句（包括动态 import()），不改变模块内部的相对路径解析逻辑。
立即学习“Java免费学习笔记（深入）”；
支持嵌套映射与范围限定（scopes）
除了全局 imports，还可以用 scopes 为特定路径下的模块设置局部别名。比如只对 /pages/ 下的脚本启用某套映射：
<script type="importmap">
{
"imports": {
"vue": "https://cdn.jsdelivr.net/npm/vue@3.3.0/+esm"
},
"scopes": {
"/pages/": {
"api-client": "./src/client.js",
"components": "./src/pages/components/"
}
}
}</script>
这样，/pages/dashboard.js 里写 import { request } from 'api-client' 就会解析为 /pages/../src/client.js（浏览器自动按当前模块路径解析相对路径）。
动态更新 Import Maps（运行时修改）
通过 JavaScript 操作 document.currentScript 或重新插入 script 标签，可以动态替换映射。但要注意：仅对后续执行的 import 生效，已加载的模块不受影响。
- 获取当前映射：
const map = document.querySelector('script[type="importmap"]'); - 修改并重载：
map.textContent = JSON.stringify(newMap); - 或创建新标签：
document.head.appendChild(newScriptEl);
适合做环境切换（如 dev/staging）、A/B 测试模块版本，但生产环境慎用——容易引发缓存和竞态问题。
兼容性与 fallback 方案
Import Maps 目前支持 Chrome 89+、Edge 89+、Firefox 105+、Safari 16.4+（桌面）和 Safari iOS 16.4+。旧浏览器会忽略该 script 标签，导致 import 报错。
安全做法是加一层检测：
<script>
if (!window.importMap) {
// 加载 es-module-shims 或其他 polyfill
const s = document.createElement('script');
s.src = 'https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js';
document.head.appendChild(s);
}</script>
或者结合构建工具（如 Vite、Rollup）在开发时模拟 Import Maps 行为，构建后转为绝对 URL —— 这样既能享受开发便利，又保障兼容性。
