JavaScript 模块化发展历程中 AMD、CMD、CommonJS 和 ES Module 有何根本区别

JavaScript 早期没有原生模块化能力，所有脚本共享全局作用域，随着项目规模扩大，变量冲突、依赖顺序难以维护的问题越来越突出，因此社区和官方逐步推出了不同的模块化规范，其中 AMD、CMD、CommonJS 和 ES Module 是最具代表性的四类。

各规范的基本定义与运行环境

AMD（Asynchronous Module Definition）

AMD 是 RequireJS 在推广过程中形成的规范，主要面向浏览器端，核心特点是异步加载模块，依赖前置，在模块定义时就会声明所有需要的依赖，加载完成后才会执行模块逻辑。

// AMD 模块定义示例
define(['moduleA', 'moduleB'], function(a, b) {
    // 依赖的 moduleA 和 moduleB 加载完成后才会执行这里的逻辑
    const result = a.add(1) + b.sub(2);
    return {
        getResult: function() {
            return result;
        }
    };
});

CMD（Common Module Definition）

CMD 是 SeaJS 推广的规范，同样面向浏览器端，和 AMD 的核心差异是依赖就近，模块定义时不需要提前声明所有依赖，在代码执行到 require 语句时才会加载对应模块。

// CMD 模块定义示例
define(function(require, exports, module) {
    // 依赖就近，用到的时候再 require
    const moduleA = require('moduleA');
    const result = moduleA.add(1);
    // 也可以后续再引入其他依赖
    const moduleB = require('moduleB');
    exports.finalResult = result + moduleB.sub(2);
});

CommonJS

CommonJS 是 Node.js 采用的模块化规范，主要面向服务器端，核心特点是同步加载模块，因为服务器端文件都在本地，加载速度快，同步加载不会阻塞执行。模块通过 require 引入依赖，通过 module.exports 或者 exports 导出内容。

// CommonJS 模块示例
const fs = require('fs');
const path = require('path');

function readFileContent(filePath) {
    return fs.readFileSync(path.resolve(filePath), 'utf-8');
}

module.exports = {
    readFileContent: readFileContent
};

ES Module

ES Module 是 ES6 官方推出的原生模块化规范，同时支持浏览器端和服务器端，是未来 JavaScript 模块化的标准方案。它采用静态编译的设计，模块的导入导出在代码编译阶段就能确定，支持 tree-shaking 等优化能力。

// ES Module 导出示例
export const name = 'es module demo';
export function add(a, b) {
    return a + b;
}
// 默认导出
export default {
    version: '1.0.0'
};

// ES Module 导入示例
import demoObj, { name, add } from './module.js';
console.log(name, add(1, 2), demoObj.version);

四者的根本区别对比

核心差异详解

加载与依赖处理差异

AMD 的依赖前置设计让模块的依赖关系在定义时就非常清晰，加载器可以在模块执行前就并行加载所有依赖，适合浏览器端网络加载的场景，但缺点是如果有些依赖不是必须提前加载的，会造成资源浪费。CMD 的依赖就近设计更符合代码编写习惯，只有用到依赖的时候才加载，但是依赖加载的时机不固定，调试时依赖关系不够直观。

CommonJS 的同步加载在服务器端没有问题，因为文件都在本地，加载耗时极短，但是如果放在浏览器端，同步加载会阻塞页面渲染，所以早期浏览器端无法直接原生使用 CommonJS 规范。ES Module 则是编译阶段就确定了导入导出关系，浏览器可以通过 <script type="module"> 标签原生支持，加载过程也是异步的，不会阻塞渲染。

导出值的差异

AMD 和 CMD 导出的都是模块执行完成后返回的值的拷贝，后续模块内部的变量变化不会影响已经导出的内容。CommonJS 导出基本类型时是值的拷贝，导出引用类型时是引用的拷贝，如果模块内部修改了引用类型的属性，外部引入的模块也能感知到变化，但重新赋值导出对象不会影响外部。ES Module 的导出是动态只读引用，外部导入的变量和模块内部的变量是绑定的，模块内部修改变量，外部导入的值也会同步变化，且外部不能直接修改导入的变量，会直接报错。

// ES Module 导出值动态绑定示例
// module.js
export let count = 0;
export function increment() {
    count++;
}

// main.js
import { count, increment } from './module.js';
console.log(count); // 输出 0
increment();
console.log(count); // 输出 1，导入的值和模块内部的 count 是绑定的
count = 2; // 报错，不能修改导入的只读引用

静态分析能力差异

AMD、CMD、CommonJS 的导入导出都是运行阶段动态执行的，无法在编译阶段确定模块的依赖关系，因此打包工具需要做大量的静态分析工作，也无法做 tree-shaking 这类依赖剔除优化。而 ES Module 的导入导出语句是静态的，不能在条件语句、函数内部使用（除非用动态 import），编译阶段就能确定所有依赖，因此工具链可以很方便地做按需加载、未使用代码剔除等优化。

场景选型建议

• 如果是老旧的浏览器端项目，还在使用 RequireJS 或者 SeaJS，那么对应使用 AMD 或者 CMD 规范即可，不过现在新的浏览器端项目更推荐直接使用 ES Module。
• Node.js 服务器端项目，如果是旧项目可以继续使用 CommonJS，新项目建议逐步迁移到 ES Module，Node.js 现在已经原生支持 ES Module，只需要将文件后缀改为 .mjs 或者在 package.json 中设置 type: "module" 即可。
• 前端工程化项目，不管是浏览器端还是 Node.js 端，都优先使用 ES Module，配合 Webpack、Vite 等打包工具，可以获得更好的优化能力和开发体验。

四种模块化规范都是 JavaScript 不同发展阶段的产物，理解它们的根本区别，能帮助开发者更好地处理项目中的模块适配问题，也能更清晰地理解前端工程化工具的设计逻辑。

AMDCMDCommonJSES_ModuleJavaScript模块化修改时间：2026-07-20 18:30:33