前端模块化：CommonJS 与 ES Module

在现代 JavaScript 的运行时与构建工具中，模块系统已成为代码组织的核心机制。理解 CommonJS 与 ES Module 的设计哲学、加载策略以及语义差异，是构建可维护、可移植代码库的基础。

一、历史与定位

CommonJS 由社区提出，早期仅针对 Node.js 运行环境；ES Module 则在 ECMAScript 规范中标准化，旨在为浏览器与服务器提供统一的模块化语法。二者分别代表了"运行时 API"与"静态语法"两大范式。

二、模块解析策略

CommonJS 的 require 函数在运行时执行字符串路径解析，允许动态拼接模块标识符。模块代码在执行阶段被包装成一个立即执行函数，形参依次为 exports、require、module、__filename、__dirname。模块首次加载后，其 exports 对象被缓存，后续再次 require 直接返回缓存引用。

ES Module 则采用静态分析：import / export 语句在编译阶段即确定依赖关系。解析过程分为静态与动态两条路径：静态导入在语法层面完成绑定，动态 import() 返回 Promise，实现按需异步加载。

三、依赖执行模型

CommonJS 的依赖在执行阶段同步加载，模块内部代码自上而下顺序运行，require 出现即阻塞当前线程直至模块加载完成。

ES Module 的静态依赖在解析阶段完成链接，动态依赖通过异步 import 引入，不阻塞主线程。模块环境记录（Module Environment Record）确保所有导入标识符与导出标识符形成符号绑定，即导入变量与导出变量共享同一内存地址，运行时修改可双向感知。

四、导出语义

CommonJS 的 exports 与 module.exports 本质上是普通对象属性赋值，导出值在 require 调用时完成快照，后续变化不可见。

js 复制代码

exports.a = 'a';
module.exports.b = 'b';
this.c = 'c';
module.exports = {
  d: 'd'
}

模块导出结果：
js 复制代码
{ d: 'd' }

ES Module 的导出分为命名导出与默认导出。命名导出通过标识符绑定实现实时引用；默认导出绑定到模块命名空间对象的 default 属性，模块内部对导出值的修改会立即反映到导入方。

js 复制代码

// module counter
var count = 1;
export {count}
export function increase(){
  count++;
}

// module main
import { count, increase } from './counter';
import * as counter from './counter';
const { count: c } = counter;
increase();
console.log(count);
console.log(counter.count);
console.log(c);

输出结果：
js 复制代码
2
2
2

五、常见陷阱

在 CommonJS 模块末尾重新赋值 module.exports 会完全覆盖之前的 exports 属性，导致先前附加到 exports 上的属性丢失。

在 ES Module 中，由于符号绑定，对导出变量的直接赋值会导致运行时错误，必须通过函数或对象属性间接修改。

六、实战建议

新项目优先采用 ES Module，利用静态分析与 Tree-Shaking 减少包体积。
需要运行时动态依赖解析的场景（插件系统、配置中心）可保留 CommonJS，或通过 dynamic import 桥接。
混用两种体系时，利用打包工具的 interop 机制统一模块格式，避免直接混用 require 与 import 导致的双重加载。