JS模块化：CommonJS, AMD, CMD, ES6 Module对比_javascript技巧

CommonJS适用于Node.js，同步加载；2. AMD面向浏览器，异步加载；3. CMD强调按需加载；4. ES6 Module为官方标准，现代开发首选。

在JavaScript的发展过程中，模块化一直是解决代码组织、依赖管理和可维护性的关键方案。随着技术演进，出现了多种模块化规范，每种都有其适用场景和特点。下面对CommonJS、AMD、CMD和ES6 Module进行对比，帮助你理解它们的差异与使用场景。

CommonJS：服务器端模块化标准

CommonJS是早期为Node.js设计的模块化规范，采用同步加载模块的方式，适合服务端环境。

特点：

• 模块加载是同步的，文件直接从磁盘读取，速度较快
• 每个文件是一个独立模块，通过module.exports导出，require导入
• 运行时确定依赖，支持动态引入

示例：

立即学习“Java免费学习笔记（深入）”；

// math.js
module.exports = {
  add: (a, b) => a + b
};
<p>// app.js
const { add } = require('./math');
console.log(add(2, 3));

由于同步加载机制，在浏览器中会阻塞页面渲染，因此不适合直接用于前端。

AMD：异步模块定义，面向浏览器

AMD（Asynchronous Module Definition）由RequireJS推广，专为浏览器环境设计，支持异步加载模块。

特点：

• 模块异步加载，不会阻塞页面渲染
• 使用define定义模块，require加载模块
• 适合模块依赖复杂、需要按需加载的前端项目

示例：

立即学习“Java免费学习笔记（深入）”；

// math.js
define([], function() {
  return {
    multiply: (a, b) => a * b
  };
});
<p>// main.js
require(['math'], function(math) {
console.log(math.multiply(3, 4));
});

语法相对复杂，但灵活性高，适合大型前端应用。

CMD：SeaJS提出的模块规范

CMD（Common Module Definition）由国内SeaJS提出，强调“按需加载、延迟执行”。

Calliper 文档对比神器

文档内容对比神器

28

查看详情

特点：

• 模块延迟加载，依赖就近书写
• 推崇一个文件一个模块，结构清晰
• 语法接近CommonJS，但在浏览器中异步执行

示例：

立即学习“Java免费学习笔记（深入）”；

// math.js
define(function(require, exports, module) {
  exports.add = function(a, b) {
    return a + b;
  };
});
<p>// app.js
define(function(require, exports, module) {
var math = require('./math');
console.log(math.add(1, 2));
});

CMD更贴近自然编码逻辑，但社区影响力不如AMD和ES6 Module，现已较少使用。

ES6 Module：官方标准，现代开发首选

ES6 Module是ECMAScript 2015引入的原生模块系统，现已被主流浏览器和Node.js广泛支持。

特点：

• 静态分析，编译时确定依赖，支持tree-shaking优化打包体积
• 使用import和export语法，简洁直观
• 支持动态导入import()实现懒加载
• 需通过构建工具（如Webpack、Vite）或type="module"在浏览器中使用

示例：

立即学习“Java免费学习笔记（深入）”；

// math.mjs
export const add = (a, b) => a + b;
<p>// app.mjs
import { add } from './math.mjs';
console.log(add(2, 5));

作为官方标准，ES6 Module已成为现代前端开发的事实标准。

基本上就这些。CommonJS适用于Node.js环境，AMD和CMD曾是前端异步模块的解决方案，如今已被ES6 Module逐步取代。选择哪种规范，取决于你的运行环境和项目需求。现在大多数项目推荐使用ES6 Module，配合构建工具或现代浏览器原生支持，开发体验更佳。

以上就是JS模块化：CommonJS, AMD, CMD, ES6 Module对比_javascript技巧的详细内容，更多请关注php中文网其它相关文章！