浏览器原生 ESM 与 import maps

本节目标

• 理解浏览器「原生支持 ESM」后，还要打包器干嘛
• 看懂 import maps 如何让裸名 import 'lodash' 在浏览器直接工作
• 知道「不打包」的开发场景

现代浏览器原生支持 <script type="module"> 和 import，但裸名 import（如 import 'lodash'）浏览器不认——它只认 URL。

<!-- 运行环境：现代浏览器（需 http 服务，不能直接 file://） -->
<!-- import map：告诉浏览器「lodash 这个裸名对应哪个 URL」 -->
<script type="importmap">
{
  "imports": {
    "lodash": "https://cdn.skypack.dev/lodash"
  }
}
</script>
<script type="module">
  import { chunk } from 'lodash'   // 浏览器查 import map 解析到上面的 URL
  console.log(chunk([1,2,3,4], 2))
</script>

还要打包器吗：要。原生 ESM 对「几十个模块逐个请求」慢、无 Tree Shaking、无压缩。打包器在「生产」解决这些；但在「教学/原型/本地小工具」场景，原生 ESM + import map 能零构建直接跑，非常爽。

名词解释

原生 ESM（Native ESM）：浏览器内置支持 import/export，无需打包器。但限制是「只认 URL 路径」，不认 npm 风格的裸名（import 'lodash' 会报「无法解析」）。它是「零构建前端」成为可能的基础。

Import Maps：一段 JSON，写在 HTML 里，告诉浏览器「裸名 → 真实 URL」的映射。有了它，浏览器就能把你写的 import 'lodash' 解析成 CDN 地址。它是「不打包也能用裸名 import」的关键，适合教学、Demo、轻量页面。

课后练习

练习 1：浏览器原生 ESM 为什么「不直接认 import 'lodash'」？

答案：浏览器只认「能发 HTTP 请求的 URL」，而 lodash 是 npm 包名不是地址。它不知道去哪下载。import map 就是来补这个映射的——把 lodash 指向一个 CDN URL，浏览器才会去拉。

练习 2：什么场景适合「完全不打包、用原生 ESM + import map」？

答案：教学演示、个人小工具、原型验证、内部轻量面板——这些「不在乎首屏多请求、要最快上手」。但正式产品（多模块、要体积小、要兼容）仍该用打包器。原生 ESM 是「开发体验」利器，打包器是「生产交付」利器。

总结

原生 ESM + import map 让「零构建前端」成为现实，我的看法是：它是教学和原型场景的神器——你改一行刷新就看到，不用等打包。但别被「零构建」冲昏头：产品级应用里，几十个模块各自请求会让首屏慢到没法看，Tree Shaking/压缩也做不了。所以定位要清：import map 管「快速跑起来」，打包器管「跑得小跑得稳」。理解两者分工，你就不会在「该不该上 Vite」上纠结——答案是「开发原型用原生、正式交付用打包器」。工具服务于场景，不是信仰。