import maps是一种w3c标准的json映射配置，用于将裸模块名（如"lodash"）解析为实际url，解决浏览器原生import不支持裸说明符的问题；它须在html中以声明，仅对type="module"脚本生效，且路径值必须为完整url或合法相对路径。
Import Maps 是什么，为什么不能直接写 import 路径？
浏览器原生 import 语句不支持裸模块名（如 import { debounce } from 'lodash'），会直接报错 Failed to resolve module specifier。Import Maps 就是为了解决这个问题——它是一份 JSON 格式的映射表，告诉浏览器“某个模块名”实际对应哪个 URL 或相对路径。
关键点：它只在 HTML 中声明，不改变 JS 文件本身；且仅对当前页面的 type="module" 脚本生效。
怎么在 HTML 中正确声明 Import Maps？
必须用 <script type="importmap"></script> 标签，放在 内（或至少在任何 type="module" 脚本之前）。内容是标准 JSON，顶层必须是 {"imports": {...}} 对象。
- 路径值必须是完整 URL 或以
/、./、../开头的相对路径，不能是裸文件名（如"utils.js"会失败） - 键名就是你在
import中写的模块标识符，可以是任意字符串（包括作用域包名如@scope/tool） - 不支持嵌套
scopes字段（Chrome 115+ 才开始实验性支持，生产环境慎用）
<script type="importmap">
{
"imports": {
"lodash": "/node_modules/lodash-es/index.js",
"my-lib": "./dist/my-lib.esm.js",
"react": "https://esm.sh/react@18.2.0"
}
}
</script>
Import Maps 和 import 语句怎么配合使用？
JS 文件里照常写裸导入，但必须确保该脚本是通过 <script type="module"></script> 加载的（内联或外链均可）。
- 错误写法：
<script src="main.js"></script>（非 module 模式，Import Maps 不生效） - 正确写法：
<script type="module" src="main.js"></script>或<script type="module">import _ from 'lodash';</script> - 注意：映射键名大小写敏感，
"Lodash"和"lodash"是两个不同模块 - 如果映射目标是 ESM 兼容的 CDN（如 esm.sh、jspm.io），需确认其返回的是真正的 ES 模块（响应头含
Content-Type: application/javascript且无 CJS 包裹）
常见加载失败原因和调试方法
控制台报 TypeError: Failed to resolve module specifier 时，先检查三件事：
- Import Maps
<script></script>是否在所有 module 脚本之前？用document.querySelector('script[type="importmap"]')确认已加载 - 映射中的路径是否 404？打开浏览器开发者工具的 Network 面板，过滤 JS 请求，看浏览器实际请求的 URL 是否返回 200
- 目标模块是否真的导出你要的命名？比如
import { debounce } from 'lodash'会失败，因为 lodash-es 默认是默认导出，应写import _ from 'lodash'; _.debounce(...) - 跨域限制：如果映射指向其他域名（如 unpkg），目标服务必须返回
Access-Control-Allow-Origin: *，否则 fetch 会被阻止
Import Maps 本身不解决模块循环依赖或运行时动态导入路径拼接问题，那些得靠构建工具或手动处理。它只是个静态解析层，轻量但边界清晰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
