es modules 中配置 import maps 需用 声明 json 映射表,必须置于 或首个 type="module" 脚本前、不可加 async/defer、仅允许一个;映射值须为 https url 或合法相对/绝对路径,目标资源需是含 export 的 esm 模块;scopes 可按路径前缀实现作用域级版本隔离。

在 ES Modules 中配置 import maps,核心是用 <script type="importmap"></script> 声明一个 JSON 格式的映射表,把裸模块名(如 'lodash')指向具体可加载的 ESM 资源地址。它不依赖构建工具,纯浏览器原生支持,但细节稍多,容易出错。
必须放在所有 module 脚本之前
import map 不是普通配置,而是解析阶段必需的前置声明:
- 必须写在
内,或至少在第一个<script type="module"></script>标签之前 - 不能加
async或defer—— 它必须同步解析,否则模块导入时找不到映射 - 一个 HTML 页面只允许存在一个 importmap,重复声明会被忽略
imports 字段要写对路径格式
映射值不是随便填的文件名,必须满足协议和路径规范:
- ✅ 推荐:完整 HTTPS URL,例如
"lodash": "https://cdn.skypack.dev/lodash@4.17.21" - ✅ 允许:以
/、./或../开头的相对/绝对路径,例如"utils": "./js/utils.mjs" - ❌ 禁止:裸文件名(
"lodash": "lodash.js")、无协议本地路径("react": "node_modules/react/index.js")、HTTP 协议(线上环境会被静默拒绝,仅http://localhost可用)
目标资源必须是合法 ESM 模块
即使 URL 能打开、返回 200,也不代表能用:
- 响应头必须包含
Content-Type: application/javascript - 脚本内容必须含
export(不能是 UMD 或 IIFE 版本),比如 Skypack、esm.sh、CDN.jsdelivr.net 的 ESM 入口通常可用 - 常见踩坑:用了 UMD 版 React,虽然能加载,但运行时报
Cannot resolve module,因为没导出
进阶:用 scopes 实现路径级作用域映射
当不同页面或模块需加载不同版本的同名包时,可用 scopes 隔离:
- 例如只在
/admin/下的模块使用新版 dayjs:{"imports": {"dayjs": "https://cdn.skypack.dev/dayjs@1.10.7"}, "scopes": {"/admin/": {"dayjs": "https://cdn.skypack.dev/dayjs@2.0.0"}}} - scopes 的键是匹配 URL 路径前缀,不是文件系统路径
- scopes 优先级高于 imports,但只对匹配路径下的模块生效
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











