import-map 是浏览器原生支持的模块路径映射机制，通过 <script type="importmap"> 声明裸模块标识符到 URL 的映射，用于微前端、本地调试、多版本共存等场景，Chrome 89+ 等现代浏览器已原生支持。
JavaScript 中的 import-map 是一种在浏览器端控制模块路径映射的标准化方案，它允许你在不修改源码的前提下，动态重写模块导入路径，特别适合微前端、多版本共存、本地调试或 CDN 切换等场景。
什么是 import-map？
<script type="importmap"> 是一个 HTML 原生支持的声明式配置，用于定义模块标识符（如 "lodash" 或 "@myorg/utils"）到实际 URL 的映射关系。它在模块解析阶段生效，早于模块加载，且对所有后续 import 语句全局有效。
例如：
<script type="importmap">{
"imports": {
"lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.21/index.js",
"@myapp/api": "/src/api/index.js"
}
}</script>
如何使用 import-map 控制模块映射
只需在页面 <head> 中插入一个 type 为 importmap 的 script 标签即可生效。注意：它必须在任何 type="module" 的脚本之前加载，否则相关 import 会报错“未找到模块”。
立即学习“Java免费学习笔记（深入）”；
- 支持嵌套路径匹配，如
"@myorg/*": "./src/lib/*"，星号可通配子路径 - 支持
"scopes"字段实现作用域级映射，比如只为某个第三方库的依赖指定特定版本 - 可通过 JavaScript 动态修改
document.querySelector('script[type=importmap]')的内容并调用location.reload()触发重解析（但实际中更推荐首次加载时定好）
import-map 的典型应用场景
它不是用来替代打包工具的，而是弥补浏览器原生模块能力的短板：
-
微前端中统一依赖管理：主应用通过 import-map 提供 React、Vue 等基础框架，子应用直接
import React from 'react'，无需打包进自身 bundle -
本地开发代理远程模块：把线上 CDN 地址映射为本地文件，比如将
"axios"指向"/mock/axios.js"，方便拦截请求或注入 mock 逻辑 - 灰度发布与多版本共存：通过服务端动态输出不同 importmap 内容，让部分用户加载 v2 版本的组件库，其余仍走 v1
注意事项和兼容性
import-map 目前已进入正式标准（HTML Spec），Chrome 89+、Edge 89+、Firefox 109+、Safari 16.4+ 均原生支持。旧版浏览器需借助 polyfill（如 es-module-shims）。
- 不能映射相对路径（如
./utils）或绝对路径（如/api/index.js），只作用于裸模块说明符（bare specifiers） - 映射目标必须是有效的 ES 模块（响应头含
Content-Type: application/javascript，且导出格式正确） - 不支持条件加载（如按环境变量切换），需结合服务端渲染或构建时注入
