Import Maps 实战指南

你是否希望直接在浏览器中引入模块而不是总依赖 Vite/Webpack？你是否想控制第三方库的版本或路径，却不想改动源码？Import Maps 给了我们标准化的方式来声明“模块别名”，是 ES Modules 体系的关键拼图。

🔍 什么是 Import Maps？

Import Maps 是一项由浏览器支持的标准，用来告诉浏览器如何解析 import 的模块路径。

传统写法（构建时代）：

import _ from 'lodash'; // bundler 替你解析成路径

使用 Import Maps 后，浏览器能直接解析：

json

{
  "imports": {
    "lodash": "https://cdn.skypack.dev/lodash"
  }
}

然后在 HTML 中声明即可：

html

<script type="importmap">
{
  "imports": {
    "lodash": "https://cdn.skypack.dev/lodash"
  }
}
</script>

✅ 使用场景一览

场景	解决问题
CDN 模块加载	无需构建工具，原生支持模块重定向
前端多版本依赖控制	控制具体路径，防止依赖冲突
无构建开发（纯 HTML + JS）	支持现代模块系统
微前端架构	隔离模块，跨子应用共享依赖

🧪 实战示例：构建一个零构建 Vue 应用

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>Vue Import Map</title>
  <script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3.4.15/dist/vue.esm-browser.js"
    }
  }
  </script>
</head>
<body>
  <div id="app">{{ message }}</div>

  <script type="module">
    import { createApp } from 'vue';

    createApp({
      data() {
        return { message: 'Hello Import Maps!' }
      }
    }).mount('#app');
  </script>
</body>
</html>

📌 无需构建工具、无需 npm 安装，即可启动原生 Vue 应用！

🧰 高级用法：使用 scopes 控制不同子模块

json

{
  "imports": {
    "axios": "https://cdn.jsdelivr.net/npm/axios@1.5.1/dist/axios.min.js"
  },
  "scopes": {
    "https://example.com/dashboard/": {
      "axios": "https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"
    }
  }
}

📌 在 dashboard 子页面使用不同版本的 axios！

🌐 浏览器支持情况（截至 2025）

浏览器	支持 Import Maps
Chrome	✅ 默认支持
Edge	✅ 支持
Safari	✅ 17+ 完整支持
Firefox	⚠️ 正在推进（需 polyfill）

🤝 与其他技术的组合价值

技术方向	与 Import Maps 的组合优势
Web Components	按模块注册自定义组件，提升复用与隔离
ESM 架构	持久缓存、按需加载、无构建部署
微前端	跨子系统共享模块、隔离路径、防止冲突
Bun/Deno	支持原生 Import Maps 映射，无需 Babel/Webpack

💡 常见误区 & 注意事项

问题	建议
写错路径或未注册模块	控制台会报错，建议严格用 CDN 验证路径
不支持动态注册 importmap	必须写在 HTML 静态中或 preload 前
Firefox 暂不支持（2025）	可使用 polyfill 或 fallback 机制

✨ 一句话总结

Import Maps 是浏览器原生的模块解析控制器，让前端真正迈入“无构建开发”的新时代，也是 Web 生态更加模块化、可控化的关键桥梁。

Import Maps 实战指南 ​

🔍 什么是 Import Maps？ ​

✅ 使用场景一览 ​

🧪 实战示例：构建一个零构建 Vue 应用 ​

🧰 高级用法：使用 scopes 控制不同子模块 ​

🌐 浏览器支持情况（截至 2025） ​

🤝 与其他技术的组合价值 ​

💡 常见误区 & 注意事项 ​

✨ 一句话总结 ​

Import Maps 实战指南

🔍 什么是 Import Maps？

✅ 使用场景一览

🧪 实战示例：构建一个零构建 Vue 应用

🧰 高级用法：使用 scopes 控制不同子模块

🌐 浏览器支持情况（截至 2025）

🤝 与其他技术的组合价值

💡 常见误区 & 注意事项

✨ 一句话总结