JavaScript模块化从CommonJS到ES Modules的演进解决了代码组织与加载效率问题。CommonJS通过require和module.exports实现服务端同步加载，适合Node.js环境；而ES Modules作为ES6标准，采用import/export支持浏览器异步静态加载，具备静态分析与Tree Shaking优势。两者在加载机制、语法和导出本质上存在差异，但Node.js通过.mjs扩展名或"type": "module"支持共存。现代前端工具普遍以ESM为默认，标志着JS向工程化语言的成熟发展。
JavaScript 模块化是现代前端开发的核心基础之一。随着项目规模扩大，代码组织变得愈发重要。从早期的全局变量冲突，到如今清晰的模块系统，JS 模块化经历了一段重要的演进过程。其中，CommonJS 和 ES Modules 是两个关键阶段。
CommonJS：服务端模块化的先行者
CommonJS 是为了解决 JavaScript 在服务端（如 Node.js）缺乏标准模块系统的问题而提出的规范。它采用同步加载模块的方式，适合服务器环境，因为文件都存在本地磁盘上，读取速度快。
其核心特点包括：
- 通过 require 导入模块
- 通过 module.exports 或 exports 导出内容
- 模块是运行时动态加载，支持条件导入
// math.js
function add(a, b) {
return a + b;
}
module.exports = { add };
// app.js
const { add } = require('./math');
console.log(add(2, 3)); // 5
由于依赖同步加载，CommonJS 不适合浏览器环境——会阻塞页面渲染。因此，尽管在 Node.js 中仍广泛使用，但浏览器中逐渐被更现代化的方案替代。
ES Modules：语言层面的官方标准
ES Modules（简称 ESM）是 ECMAScript 2015（ES6）引入的官方模块系统，旨在统一 JavaScript 的模块规范。它设计之初就考虑了浏览器和服务器的通用性，并支持静态分析、Tree Shaking 等优化手段。
主要特性有：
- 使用 import 声明导入模块
- 使用 export 声明导出内容
- 模块是静态的，编译时确定依赖关系
- 支持动态导入 import() 实现按需加载
// math.mjs
export function add(a, b) {
return a + b;
}
// app.mjs
import { add } from './math.mjs';
console.log(add(2, 3)); // 5
在浏览器中，ESM 需要通过 来启用。模块默认处于严格模式，且跨域加载受 CORS 限制。
CommonJS 与 ES Modules 的差异与共存
两者在语法、加载机制和执行时机上有明显不同：
- 加载方式：CommonJS 同步，ESM 默认异步静态加载
- 动态性：CommonJS 支持动态路径和条件加载；ESM 的 import 必须在顶层且静态声明（动态 import() 除外）
- 导出本质：CommonJS 导出的是值的拷贝；ESM 导出的是绑定，可实时反映更新
Node.js 自 v12 起支持 ESM，但需注意文件扩展名为 .mjs，或在 package.json 中设置 "type": "module"。同时，Node.js 提供了互操作能力，例如用 import() 加载 CommonJS 模块，或通过 createRequire 在 ESM 中使用 require。
总结：演进背后的逻辑
从 CommonJS 到 ES Modules，反映的是 JavaScript 从脚本语言向工程化语言的转变。CommonJS 解决了模块化从无到有的问题，而 ESM 提供了标准化、高性能和工具友好的解决方案。如今大多数前端构建工具（如 Webpack、Vite）都以 ESM 为默认处理方式，Node.js 也在逐步推进对 ESM 的全面支持。
理解这段演进过程，有助于写出更符合现代规范的代码，也能更好应对混合模块环境中的兼容问题。
基本上就这些。
