前端模块化: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 中,由于符号绑定,对导出变量的直接赋值会导致运行时错误,必须通过函数或对象属性间接修改。

六、实战建议

  1. 新项目优先采用 ES Module,利用静态分析与 Tree-Shaking 减少包体积。
  2. 需要运行时动态依赖解析的场景(插件系统、配置中心)可保留 CommonJS,或通过 dynamic import 桥接。
  3. 混用两种体系时,利用打包工具的 interop 机制统一模块格式,避免直接混用 require 与 import 导致的双重加载。
相关推荐
非凡ghost17 小时前
Atlantis Word Processor(文字处理软件)
前端·javascript·后端
小时前端17 小时前
面试官:线上应用内存持续泄漏,你如何快速定位并止血?
前端·浏览器
前端白袍18 小时前
Vue:关于 Vue2 父子组件传值方法 以及 props 的定义方法和使用
前端·javascript·vue.js
非凡ghost18 小时前
TeamViewer 手机版:一键远程控制,深度管理,提升多设备管理效率
前端·javascript·后端
慧一居士18 小时前
Vue项目页面间,页面中跳转及刷新规划,何时使用router-view,router-link,iframe,slots ,使用场景,及对应场景的完整使用示例
前端·vue.js
Data_Adventure18 小时前
Vue 3 组件重构实战:从重复代码到优雅抽象的三种方案
前端·vue.js
狮子座的男孩18 小时前
js基础:06、函数(创建函数、参数、返回值、return、立即执行函数、对象(函数))和枚举对象的属性
开发语言·前端·javascript·经验分享·函数·枚举对象·立即执行函数
一枚前端小能手18 小时前
🔄 重学Vue之依赖注入(provide、inject)
前端·javascript·vue.js
Mintopia18 小时前
🧩 未成年人保护视角:WebAIGC内容的分级过滤技术
前端·javascript·aigc
Mintopia18 小时前
🌌 Three.js 几何变化动画配合噪声粒子教程:让你的代码也会“呼吸”
前端·javascript·three.js