一文搞懂 JavaScript 模块化
内容提要
本文介绍了JavaScript模块化的历史和现状，包括commonjs、AMD、UMD和ESM等标准，以及浏览器和Node.js对ESM的支持。同时提到了Deno和npm包的使用。
延伸解读
模块化演进：从社区方案到语言标准
JavaScript 模块化经历了从无到有、从分裂到统一的过程。早期浏览器和 Node.js 各自为政，分别推出 AMD 和 CommonJS，导致社区分裂。UMD 虽暂时缓解兼容问题，但直到 2015 年 ESM 成为语言标准，才真正实现原生模块支持。这一演进反映了 JavaScript 生态从混乱走向规范的趋势，也提醒开发者理解历史有助于应对遗留代码。
Node.js 支持 ESM 的复杂性与兼容策略
Node.js 对 ESM 的支持并非一蹴而就，为了兼容大量 CommonJS 模块，它通过文件后缀（.mjs/.cjs）和 package.json 的 type 字段来区分模块体系。此外，exports 字段提供了更精细的入口控制，支持条件导出。开发者需注意 ESM 可以引用 CommonJS，反之则不行，这影响了库的架构设计。
双包问题：风险与应对思路
当库同时提供 ESM 和 CommonJS 入口时，若项目中间接依赖了不同版本，可能导致代码被重复执行，即“双包问题”。对于有状态或单例需求的库，这会引发严重 bug。目前有两种应对思路：保守做法是在 CommonJS 中实现核心逻辑，ESM 仅做包装；激进做法是只提供 ESM，放弃旧环境。开发者需根据库的特性权衡。
面向库开发者的实践建议
现代 JavaScript 库开发者常需同时支持多种模块体系，包括 ESM、CommonJS、UMD 等，并处理浏览器与 Node.js 的环境差异。package.json 中的 browser、module、exports 等字段提供了配置手段，但规则复杂。建议使用工具如 jslib-base 快速搭建基础框架，并仔细阅读相关规范，以确保库的广泛兼容性。
Q&A
JavaScript模块化的历史背景是什么？
JavaScript最初是一种在浏览器中使用的脚本语言，缺乏模块体系，导致封装和依赖管理问题。
Node.js是如何解决JavaScript缺失模块的问题的？
Node.js引入了commonjs标准，强制模块定义，解决了JavaScript缺失模块的问题。
AMD标准的主要特点是什么？
AMD（Asynchronous Module Definition）标准支持异步加载模块，通常需要使用加载器如RequireJS。
UMD标准的作用是什么？
UMD（Universal Module Definition）标准解决了不同模块体系之间的兼容性问题，支持传统JavaScript、AMD和commonjs。
ESM与commonjs的主要区别是什么？
ESM（ECMAScript6 Module）提供原生模块支持，而commonjs是为同步导入设计的模块体系。
Deno与Node.js在模块加载上有什么不同？
Deno只支持通过URL加载模块，而Node.js使用文件路径加载模块。
