前言：
CJS、AMD、UMD 和 ESM 都是给 Javascript 添加模块化的方法，还有其他方法，但这些是比较通用的。什么？你不知道什么叫模块化？那你肯定写过 import * from ‘’吧，这就已经使用了模块化的技术思想。
ESM (ES 模块, 异步导入，用于浏览器端)
- ESM 代表 ES 模块。这是 Javascript 提出的实现一个标准模块系统的方案。我相信你们很多人都看到过这个:
| import React from 'react';
复制代码
或者其他更多的
import {foo, bar} from './myLib';
...
export default function() {
};
export const function1() {...};
export const function2() {...};
|
- 它兼具两方面的优点：具有 CJS 的简单语法和 AMD 的异步
- 得益于 ES6 的静态模块结构，可以进行 Tree Shaking
- ESM 允许像 Rollup 这样的打包器，删除不必要的代码，减少代码包可以获得更快的加载
CJS (CommonJS: 同步导入模块)
CJS 是 CommonJS 的缩写。经常我们这么使用：
| const doSomething = require("./doSomething.js");
module.exports = function doSomething(n) {};
|
- Node 就是使用 CJS 模块的
- CJS 是同步导入模块
- 你可以从 node_modules 中引入一个库或者从本地目录引入一个文件 。如 const myLocalModule = require(’./some/local/file.js’) 或者 var React = require(‘react’); ，都可以起作用, 当 CJS 导入时，它会给你一个导入对象的副本.
- CJS 不能在浏览器中工作。它必须经过转换和打包
AMD (asynchronously：异步模块定义)
示例
| define(["dep1", "dep2"], function (dep1, dep2) {
return function () {};
});
|
| define(function (require) {
var dep1 = require("dep1"),
dep2 = require("dep2");
return function () {};
});
|
- AMD 是异步 (asynchronously) 导入模块的(因此得名)
- 一开始被提议的时候，AMD 是为前端而做的 (而 CJS 是后端)
- AMD 的语法不如 CJS 直观。我认为 AMD 和 CJS 完全相反
UMD（Universal Module Definition：通用模块定义）
| (function (root, factory) {
if (typeof define === "function" && define.amd) {
define(["jquery", "underscore"], factory);
} else if (typeof exports === "object") {
module.exports = factory(require("jquery"), require("underscore"));
} else {
root.Requester = factory(root.$, root._);
}
}(this, function ($, _) {
var Requester = {
return Requester;
}));
|