1. 模块化开发的前世今生
十年前我刚入行前端的时候，项目里随处可见这样的代码：
javascript复制function utils() {
// 工具函数集合
}
function service() {
// 业务逻辑
}
所有函数都挂在全局作用域下，像一锅大杂烩。直到后来遇到一个3万行代码的遗留项目，我才真正体会到什么叫"全局变量污染"的噩梦。这就是为什么我们需要模块化——把代码拆分成独立、可复用的单元。
目前主流的两种模块化方案是CommonJS和ES6 Module，它们分别代表了不同的设计哲学和应用场景。CommonJS像是务实的老兵，在Node.js生态扎根多年；ES6 Module则是标准化的新锐，正在浏览器端大放异彩。
2. CommonJS深度解析
2.1 设计理念与运行机制
CommonJS的核心理念是"同步加载"，这源于它的服务端基因。在Node.js环境中，模块文件都存放在本地磁盘，读取速度极快。典型的模块导出是这样的：
javascript复制// math.js
const add = (a, b) => a + b;
module.exports = { add };
// app.js
const { add } = require('./math');
console.log(add(2, 3)); // 5
关键点在于：
require是同步操作，会阻塞代码执行- 模块输出的是值的拷贝（原始类型是深拷贝，对象是浅拷贝）
- 模块在首次加载后会被缓存
2.2 循环依赖的破解之道
实际项目中经常遇到模块A依赖B，B又依赖A的情况。CommonJS通过部分加载机制处理这种循环引用：
javascript复制// a.js
exports.done = false;
const b = require('./b');
console.log('在a中，b.done =', b.done);
exports.done = true;
// b.js
exports.done = false;
const a = require('./a');
console.log('在b中，a.done =', a.done);
exports.done = true;
运行时会输出：
code复制在b中，a.done = false
在a中，b.done = true
这说明循环依赖时，模块会先导出未执行完的版本。
3. ES6 Module的革新
3.1 静态分析与动态绑定
ES6 Module最大的特点是编译时静态分析：
javascript复制// lib.mjs
export let counter = 0;
export function increment() {
counter++;
}
// main.mjs
import { counter, increment } from './lib.mjs';
console.log(counter); // 0
increment();
console.log(counter); // 1
与CommonJS不同：
import必须放在模块顶层- 输出的是值的动态引用
- 通过
export暴露的变量会实时反映变化
3.2 浏览器端的实现细节
现代浏览器通过<script type="module">支持ES6模块：
html复制<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp(/*...*/).mount('#app');
</script>
需要注意：
- 模块自动启用严格模式
- 每个模块都有独立作用域
- 默认启用defer属性（异步加载不阻塞）
4. 两种规范的对比实战
4.1 核心差异对照表
| 特性 | CommonJS | ES6 Module |
|---|---|---|
| 加载方式 | 同步 | 异步 |
| 输出类型 | 值拷贝 | 动态引用 |
| 适用环境 | Node.js | 浏览器/Node.js |
| 循环依赖处理 | 部分加载 | 引用追踪 |
| 动态导入 | require()任意位置 | import()函数 |
4.2 混用时的注意事项
在Node.js中同时使用两种规范时，建议：
- 文件扩展名区分（.cjs vs .mjs）
- package.json中设置
"type": "module" - 动态导入统一用
import()
典型问题案例：
javascript复制// 错误示例
const fs = require('fs'); // CommonJS
import path from 'path'; // ES Module
// 正确做法
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const fs = require('fs');
5. 工程化实践指南
5.1 Webpack的模块处理
现代构建工具会统一处理模块语法。在webpack配置中：
javascript复制module.exports = {
//...
experiments: {
outputModule: true // 输出ES模块
},
externalsType: 'module'
};
5.2 Tree Shaking优化
ES6 Module的静态特性使得构建工具能进行更彻底的dead code elimination：
javascript复制// utils.js
export function used() { /*...*/ }
export function unused() { /*...*/ }
// main.js
import { used } from './utils';
打包时unused函数会被自动移除，这在CommonJS中难以实现。
5.3 动态加载最佳实践
按需加载大型模块的推荐方式：
javascript复制// 传统方式
const heavyModule = await import('./heavyModule.mjs');
// 带加载指示器
async function loadWithProgress() {
const spinner = showLoadingSpinner();
try {
const module = await import('./module.mjs');
return module;
} finally {
spinner.hide();
}
}
6. 升级迁移路线图
6.1 从CommonJS到ESM的渐进方案
- 先将测试文件改为.mjs扩展名
- 使用动态import()替换部分require()
- 逐步迁移工具链（Jest配置示例）：
javascript复制// jest.config.js
module.exports = {
transform: {
'^.+\\.mjs$': 'babel-jest',
},
moduleFileExtensions: ['mjs', 'js'],
};
6.2 常见兼容性问题处理
__dirname替代方案：
javascript复制import { fileURLToPath } from 'url';
import { dirname } from 'path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
- JSON文件导入：
javascript复制// 之前
const pkg = require('./package.json');
// 之后
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const pkg = require('./package.json');
7. 前沿动态与未来展望
Node.js正在积极推进ESM的全面支持，目前已经实现：
- 顶层await支持
- 模块加载器hooks
- 更完善的import.meta属性
在浏览器端，import maps的普及将改变模块引用方式：
html复制<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'; // 自动解析为CDN地址
</script>
8. 开发者决策指南
选择模块方案时考虑这些因素：
- 项目运行环境（Node.js版本、浏览器兼容性）
- 团队技术栈（是否使用Babel等转译工具）
- 性能需求（是否需要Tree Shaking优化）
- 第三方库依赖情况
对于新项目，我的个人建议是优先采用ES Modules，这是语言标准的发展方向。对于存量项目，可以采用渐进式迁移策略。