当前位置：首页 > news >正文

前端模块化：CommonJS 与 ES Module

news 2025/7/25 12:26:22

在现代 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 调用时完成快照，后续变化不可见。

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

模块导出结果：
{ d: 'd' }

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

// 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);