Import Maps是W3C标准的浏览器原生机制，通过<script type="importmap">中JSON映射将裸模块名（如“react”）解析为实际URL，解决浏览器无法自动解析node_modules的问题，仅对type="module"脚本生效。
什么是导入映射（Import Maps）
导入映射是浏览器原生支持的一种机制，用于将裸模块说明符（如 react、lodash-es）重写为实际可加载的 URL 路径。它解决了浏览器无法像 Node.js 那样自动解析 node_modules 的根本限制——不用打包工具，也能在纯 HTML 环境中用 import 直接引入 npm 包。
怎么配置导入映射
在 HTML 文件中，通过 <script type="importmap"> 声明一个 JSON 格式的映射表。关键点有三个：
- 必须放在所有
<script type="module">标签之前 - 映射键是包名（裸说明符），值是完整 URL（支持相对路径、CDN 地址或本地文件）
- 支持嵌套
imports和scopes，但基础场景用imports就够了
示例：
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18",
"react-dom/client": "https://esm.sh/react-dom@18/client",
"lodash-es": "https://esm.sh/lodash-es@4.17"
}
}</script>
<script type="module">
import { debounce } from 'lodash-es';
import React from 'react';
console.log(debounce);
</script>
为什么需要它？直接 import 'pkg' 不行吗
不行。浏览器遇到 import _ from 'lodash' 会报错：Failed to resolve module specifier "lodash"。因为浏览器没有 node_modules 查找逻辑，也不读取 package.json 中的 exports 或 main 字段。导入映射就是手动补上这层“查找规则”，把名字翻译成地址。
立即学习“Java免费学习笔记（深入）”；
注意：Node.js 不需要导入映射，它内置了包解析；而浏览器端即使启用了 ESM，也必须靠它才能用裸包名。
实用建议与常见坑
使用导入映射时，这几个细节容易出问题：
- CDN 选支持 ESM 的服务，比如 esm.sh、skypack.dev 或 jspm.io；别用只提供 UMD 版本的 CDN
- 版本号要写明确，避免缓存导致行为不一致（例如用
lodash-es@4.17.21，而不是lodash-es@latest） - 映射中的路径必须是有效的、可跨域加载的（开启 CORS）；本地开发若用 file:// 协议，多数浏览器会拒绝加载，得用本地服务器（如
npx serve） - 它只影响浏览器端；Node.js 中设置
"type": "module"后可直接import，无需映射
不复杂但容易忽略
