ES6 模块 (ECMAScript Modules, ESM) 和 CommonJS (CJS) 是 JavaScript 中两种主流的模块系统,它们的设计理念、语法和运行机制有显著区别。以下是它们的核心异同点:
核心区别
| 特性 | ES6 模块 (ESM) | CommonJS (CJS) |
|---|---|---|
| 设计目标 | 浏览器 + 服务器通用标准 (ECMAScript 规范) | Node.js 服务器端设计 |
| 加载时机 | 静态编译时解析 (import/export) | 动态运行时加载 (require/module.exports) |
| 语法 | import/export (声明式语法) | require()/module.exports (函数/对象赋值) |
| 模块对象 | 只读的"活绑定" (导出值变化会影响导入值) | 导出值的拷贝 (导入后与原模块解耦) |
| 加载方式 | 异步加载(浏览器),支持 top-level await | 同步加载(Node.js 原生实现) |
| 文件扩展名 | .mjs 或 .js (需在 package.json 中设置 "type": "module") | .cjs 或 .js (默认) |
this 指向 | 顶层 this 为 undefined | 顶层 this 指向 module.exports |
| Tree Shaking | 支持(静态分析可删除未使用代码) | 不支持(动态依赖难以静态分析) |
| 循环依赖处理 | 更健壮(通过"活绑定"解决) | 可能引发问题(依赖执行顺序敏感) |