Import Maps：原生模块映射与依赖治理

---

title: Import Maps：原生模块映射与依赖治理

keywords:

• Import Maps
• bare specifiers
• 浏览器模块
• 依赖映射
• CDN

description: 使用 Import Maps 为浏览器原生模块提供依赖映射与别名，简化部署与版本治理，并规范同源路径前缀与外部 CDN 映射。

categories:

• 文章资讯
• 编程技术

---

概述

Import Maps 允许在浏览器中将裸导入符与路径进行映射，实现依赖别名与版本锁定。通过在 HTML 中声明 type="importmap" 的脚本定义映射表。

用法/示例

<script type="importmap">
{
  "imports": {
    "lodash": "https://cdn.example.com/[email protected]/lodash.js",
    "@/utils/": "/static/utils/"
  }
}
</script>
<script type="module">
import _ from 'lodash'
import { foo } from '@/utils/foo.js'
console.log(_.VERSION, foo())
</script>

工程建议

• 限定同源前缀与经过审核的 CDN，防止供应链风险。
• 与构建产物协同，保持映射与打包输出一致，避免 404。
• 在多页应用中统一引入 Import Map，确保模块解析一致性。

参考与验证

• MDN：Import maps — https://developer.mozilla.org/docs/Web/HTML/Element/script/type/importmap
• WHATWG HTML：Import maps — https://html.spec.whatwg.org/multipage/webappapis.html#import-maps