importmap必须写在head中且type="importmap"，内联JSON格式，顶层仅imports或scopes字段；须位于所有type="module"脚本之前，映射URL需为完整路径且指向合法ES模块。
importmap 必须写在 里且 type="importmap"
浏览器只认 <script type="importmap"> 这一种写法，写成 text/json、漏掉 type、或者用 <script src="xxx.json"> 都不生效。它必须是内联 JSON，顶层只能有 imports（或 scopes），不能嵌套其他字段。
常见错误：
– 把 importmap 放在 </body> 前面，导致后续 type="module" 脚本执行时还没加载映射；
– 在同一页面混用多个 type="importmap"，只有第一个被解析；
– JSON 格式错误（比如末尾多逗号、单引号、注释），整个映射静默失败。
正确位置示例：
<head>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3.4.15/dist/vue.esm-browser.js",
"lodash": "https://cdn.skypack.dev/lodash-es@4.17.21"
}
}
</script>
<script type="module" src="main.js"></script>
</head>
裸模块名怎么写进 imports？注意路径和协议
imports 的 key 是你在 JS 里写的裸模块标识符，value 必须是完整 URL（含协议或根对齐路径），且目标资源必须是合法 ES 模块（响应头含 Content-Type: application/javascript 或 application/importmap+json）。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
– 写相对路径如 "utils": "./src/utils.js"：不行，必须是绝对路径或带协议的 URL；
– 映射到非模块文件（比如普通 .js 没加 export 或没设 type="module"）：运行时报 TypeError: Cannot resolve module；
– CDN 地址返回 404 或 MIME 不匹配（例如 skypack 返回 text/plain）：控制台报 Failed to fetch dynamically imported module。
推荐写法：
– 用 CDN（skypack、jspm、unpkg）自动转 ES 模块："lit": "https://cdn.skypack.dev/lit@3.2.0"；
– 本地开发可用根路径："api": "/js/api-client.js"，但需确保该文件已用 export 暴露接口。
scopes 能按路径隔离模块版本，但只在 Chrome 115+ / Firefox 119+ 生效
scopes 不是所有浏览器都支持，目前仅较新版本的 Chrome、Firefox 和 Safari 16.4+ 可用。它的作用是让某个子路径下的模块 import 自动使用不同映射，比如管理后台和前台共用 axios，但版本不同。
典型结构：
{
"imports": {
"axios": "https://cdn.jsdelivr.net/npm/axios@1.5.1/dist/axios.min.js"
},
"scopes": {
"/admin/": {
"axios": "https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"
}
}
}
关键点：
– scopes 的 key 是路径前缀（必须以 / 开头），不是正则或通配符；
– 它只影响从该路径下加载的模块脚本（比如 <script type="module" src="/admin/dashboard.js">）；
– 如果当前页面 URL 是 https://example.com/admin/users，且 dashboard.js 里写了 import axios from 'axios'，才会命中 scope 规则；
– 不支持嵌套 scope，也不支持 host 级别匹配（比如 "https://api.example.com/" 不生效）。
外部 importmap 文件要配对 MIME 类型
把 importmap 拆成单独文件（如 /import-map.json）可以提升可维护性，但服务器必须返回正确的 MIME 类型：application/importmap+json。否则浏览器直接忽略，不报错也不加载。
常见处理方式：
– Nginx：在 location 块中加 types { application/importmap+json json; }；
– Vite / webpack dev server 默认不支持，需插件或代理重写 header；
– GitHub Pages、Netlify 等静态托管平台通常不支持自定义 MIME，建议内联；
– 本地测试用 python3 -m http.server 不行，它不识别该类型，得换 serve 或 http-server -c-1 并手动加 header。
引用方式很简单：
<script type="importmap" src="/import-map.json"></script>
但记住：这个 src 请求失败（404 / CORS / MIME 错）时，控制台只会显示“failed to fetch import map”，不会告诉你具体哪一行 JSON 出问题——得先确认网络面板里请求是否成功、响应头是否正确。
