JavaScript的模块化发展历程反映了前端工程化的演进轨迹。本文将深入剖析CommonJS、AMD、CMD和ES Module四种主流模块化方案，帮助开发者理解它们的核心思想、实现原理及适用场景。
一、模块化背景与演进历程
1.1 为什么需要模块化？
在早期JavaScript开发中，随着代码量增长，开发者面临以下挑战：
全局污染：所有变量/函数都挂在全局对象上
依赖混乱：脚本加载顺序难以维护
复用困难：代码组织缺乏标准方式
// 传统开发方式示例
var util = {
formatDate: function() { /*...*/ }
}; // 可能与其他文件中的util冲突
function init() { /*...*/ } // 全局函数污染
1.2 模块化演进时间线
timeline
title JavaScript模块化演进
2009 : CommonJS (Node.js)
2011 : AMD (RequireJS)
2013 : CMD (SeaJS)
2015 : ES Module (ES6)
2020 : ES Module成为浏览器原生标准
二、CommonJS规范
2.1 核心特性
同步加载：适用于服务器环境
模块级作用域：每个文件都是独立模块
缓存机制：模块首次加载后会被缓存
2.2 基本语法
// math.js
function add(a, b) {
return a + b;
}
module.exports = { add };
// 或使用exports简写
exports.multiply = (a, b) => a * b;
// app.js
const math = require('./math');
console.log(math.add(2, 3)); //
2.3 实现原理
Node.js的模块系统实现主要流程：
路径解析：处理相对/绝对路径和node_modules查找
文件定位：补全扩展名(.js/.json/.node)
编译执行：
创建模块对象
包裹函数：(function(exports, require, module, __filename, __dirname) { /* 模块代码 */ })
缓存检查：require.cache对象维护缓存
2.4 特点分析
优点 缺点
语法简单直观 同步加载不适合浏览器
Node.js原生支持 无法实现按需加载
完善的生态系统 浏览器端需要打包工具转换
三、AMD（Asynchronous Module Definition）
3.1 设计背景
由RequireJS推广，针对浏览器环境的异步加载方案。
3.2 核心语法
// 定义模块
define('math', ['dependency'], function(dep) {
const subtract = (a, b) => a - b;
return { subtract };
});
// 加载模块
require(['math'], function(math) {
console.log(math.subtract(5, 2)); //
});
3.3 配置示例
require.config({
baseUrl: 'js/lib',
paths: {
'jquery': 'https://www.naquan.com/jquery.min',
'lodash': 'utils/lodash.custom'
},
shim: {
'legacyLib': {
exports: 'LegacyGlobal'
}
}
});
3.4 核心特点
异步并行加载：不阻塞页面渲染
前置依赖声明：依赖必须提前声明
适合浏览器环境：特别是大型SPA应用
四、CMD（Common Module Definition）
4.1 设计理念
由Sea.js推广，强调就近依赖和懒执行。
4.2 基本语法
// 定义模块
define(function(require, exports, module) {
const dep1 = require('./dep1'); // 同步require
require.async('./dep2', function(dep2) { // 异步require
// ...
});
exports.hello = () => console.log('Hello CMD');
});
// 使用模块
seajs.use(['moduleA'], function(moduleA) {
moduleA.hello();
});
4.3 与AMD的关键区别
模块定义
AMD: 前置声明所有依赖
CMD: 就近声明依赖
执行时机
AMD: 提前执行
CMD: 懒执行
五、ES Module（ES6模块）
5.1 语言级标准
2015年ES6引入的官方模块系统。
5.2 基本语法
// lib.mjs
export const PI = 3.1415926;
export function circleArea(r) {
return PI * r * r;
}
export default class Calculator { /*...*/ }
// app.mjs
import Calc, { PI, circleArea } from './lib.mjs';
console.log(circleArea(Calc.round(1.5)));
5.3 核心特性
静态化：编译时确定依赖关系
实时绑定：export的值是动态引用
异步加载：支持顶层await
严格模式：模块默认启用strict mode
5.4 现代浏览器支持
<script type="module">
import { format } from '/utils.js';
format('ESM in browser!');
</script>
<script nomodule>
alert('您的浏览器不支持ES Module');
</script>
六、对比分析
6.1 语法对比表
特性 CommonJS AMD CMD ES Module
加载方式 同步 异步 异步/同步 异步
执行时机 运行时 提前执行 懒执行 编译时
输出类型 值拷贝 值拷贝 值拷贝 实时绑定
语法关键字 require/exports define/require define/require import/export
静态分析 困难 可能 可能 容易
循环依赖 支持但复杂 支持 支持 支持
6.2 编译时 vs 运行时
静态分析
动态require
ESModule
打包工具优化
CommonJS
运行时解析
6.3 使用场景建议
Node.js后端：CommonJS（目前逐步迁移到ESM）
传统浏览器项目：AMD/CMD（遗留系统维护）
现代前端工程：ES Module（Vue/React等框架标配）
跨环境库开发：UMD（Universal Module Definition）
七、演进趋势与最佳实践
7.1 现代工作流示例
// 使用ES Module编写源码
import lodash from 'lodash-es';
// 通过Rollup/webpack打包
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'es' // 也可输出为cjs/umd等
}
};
7.2 迁移策略
渐进式迁移：
// package.json
{
"type": "module", // 默认ESM
"main": "./index.cjs", // CommonJS后备
"exports": {
"import": "./esm/index.js",
"require": "./cjs/index.js"
}
}
代码互操作：
// ESM中引入CommonJS
import _ from 'lodash'; // 自动转换
// CommonJS中引入ESM（需动态import）
async function load() {
const { readFile } = await import('fs/promises');
}
7.3 未来展望
ES Module成为主流：浏览器/Node.js统一标准
import maps：浏览器原生解决裸模块说明符
<script type="importmap">
{
"imports": {
"lodash": "/node_modules/lodash-es/lodash.js"
}
}
</script>
顶级await：简化异步模块初始化
八、总结
JavaScript模块化方案的选择应基于：
目标运行环境（浏览器/Node.js/通用）
项目规模（小型脚本/大型应用）
团队技术栈（历史代码/现代框架）
性能需求（按需加载/打包优化）
理解各种方案的底层原理，有助于开发者：
合理选择技术方案
高效排查模块相关问题
设计可维护的代码结构
平滑过渡到新一代标准
随着ES Module的全面普及，JavaScript终于拥有了统一的模块系统，标志着前端工程化进入新阶段。
