AMD、CMD、UMD、ES Module、CommonJS 五种模块规范的对比
请全面对比 JavaScript 五种模块化方案的定义、加载方式、语法和使用场景。
回答
我是大山
| 规范 | 加载方式 | 语法 | 适用环境 | 代表 |
|---|---|---|---|---|
| CommonJS | 同步加载(运行时) | require/module.exports | Node.js | Node 默认 |
| AMD | 异步加载(依赖前置) | define(id, deps, factory) | 浏览器 | RequireJS |
| CMD | 异步加载(就近依赖) | define(factory) → 内部 require | 浏览器 | Sea.js |
| ES Module | 静态加载(编译时) | import/export | 浏览器+Node.js | 标准 |
| UMD | 通用(兼容 AMD+CJS+全局) | 自执行判断 | 通用 | 第三方库 |
详解:
AMD:依赖前置,提前加载所有依赖
define(['jquery', 'lodash'], function($, _) {
return { /* 模块 */ };
});
CMD:就近依赖,用到时再 require
define(function(require, exports, module) {
var $ = require('jquery');
var _ = require('lodash');
return { /* 模块 */ };
});
UMD:判断环境选择导出方式
(function(root, factory) {
if (typeof define === 'function' && define.amd) define(factory);
else if (typeof module === 'object' && module.exports) module.exports = factory();
else root.MyLib = factory();
}(this, function() { return {}; }));
现代推荐:ES Module(标准)+ CommonJS(Node.js 生态兼容)。