JavaScript模块化从CommonJS服务端奠基到ES Modules成为跨平台官方标准，历经语法与生态演进。CommonJS通过require和module.exports实现同步加载，适用于Node.js；而ESM采用import/export支持静态分析、tree-shaking及浏览器原生异步加载，推动前端工程化进步。尽管两者因文件扩展名、API和运行时差异共存并带来迁移挑战，但现代项目已转向ESM为主流，Node.js与浏览器均良好支持，标志着模块化统一时代的到来。
JavaScript 的模块化发展经历了从无到有、从服务端主导到浏览器原生支持的完整过程。早期的 JavaScript 缺乏模块机制，开发者通过全局变量和立即执行函数来组织代码，导致命名冲突和依赖混乱。随着项目复杂度提升，模块化成为刚需。CommonJS 在 Node.js 环境中率先解决了这个问题，随后 AMD、UMD 等方案尝试在浏览器中实现异步加载。最终，ES Modules（ESM）作为官方标准被纳入语言规范，实现了跨平台统一。
CommonJS：服务端模块化的奠基者
CommonJS 是为了解决服务器端 JavaScript 模块化问题而提出的规范，Node.js 采用了这一标准并广泛推广。它使用 require() 加载模块，module.exports 或 exports 导出内容。
特点包括：
- 同步加载，适合服务端文件读取场景
- 每个模块有独立作用域，避免全局污染
- 支持动态路径和条件引入
- 不适用于浏览器环境，因同步加载会阻塞页面
示例代码：
立即学习“Java免费学习笔记（深入）”；
// math.js
module.exports = {
add: (a, b) => a + b
};
// app.js
const { add } = require('./math');
console.log(add(2, 3));
ES Modules：现代 JavaScript 的官方标准
ES6（ECMAScript 2015）正式引入了 ES Modules（ESM），成为语言层面的模块系统。它设计之初就考虑了静态分析、性能优化和跨平台兼容性。
核心语法使用 import 和 export，支持命名导出和默认导出。
主要优势：
示例代码：
立即学习“Java免费学习笔记（深入）”；
// math.mjs
export const add = (a, b) => a + b;
export default function multiply(a, b) {
return a * b;
}
// app.mjs
import multiply, { add } from './math.mjs';
console.log(add(2, 3));
console.log(multiply(2, 3));
从 CommonJS 到 ESM：兼容与共存
尽管 ESM 成为主流，CommonJS 仍在大量遗留项目和 Node.js 生态中使用。Node.js 自 8.5 版本开始实验性支持 ESM，14 版本后趋于稳定。两者差异带来迁移挑战：
- 文件扩展名：.cjs 用于 CommonJS，.mjs 或 package.json 中 type: "module" 启用 ESM
- require 不可在 ESM 中直接使用，需用 import() 动态导入
- __dirname、__filename 在 ESM 中不再可用，需通过 import.meta.url 计算
- 循环引用处理机制不同，可能导致行为变化
实际开发中常见混合模式：
- 新项目优先使用 ESM
- 老项目逐步迁移，或通过构建工具转换
- 库作者同时发布 cjs 和 esm 构建版本
基本上就这些。从 CommonJS 到 ES Modules，不仅是语法变迁，更是 JavaScript 应用工程化的演进缩影。如今 ESM 已成主流，浏览器和 Node.js 都提供良好支持，模块化变得更加高效和统一。虽然过渡期存在兼容问题，但趋势明确：ES Modules 是未来。
