最初，Javascript 没有导入/导出模块的方法， 这是让人头疼的问题。 想象一下，只用一个文件编写应用程序——这简直是噩梦！
然后，很多比我聪明得多的人试图给 Javascript 添加模块化。其中就有 CJS、AMD、UMD 和 ESM。你可能听说过其中的一些方法(还有其他方法，但这些是比较通用的)。
我将介绍它们：它们的语法、目的和基本行为。我的目标是帮助读者在看到它们时认出它们
CJS
CJS 是 CommonJS 的缩写。经常我们这么使用：
// importing
const doSomething = require('./doSomething.js');
// exporting
module.exports = function doSomething(n) {
// do something
}
复制代码- 很多人可以从
Node中立刻认出CJS的语法。这是因为Node就是使用CJS模块的 -
CJS是同步导入模块 - 你可以从
node_modules中引入一个库或者从本地目录引入一个文件 。如const myLocalModule = require('./some/local/file.js')或者var React = require('react');，都可以起作用 - 当
CJS导入时，它会给你一个导入对象的副本 -
CJS不能在浏览器中工作。它必须经过转换和打包
AMD
AMD 代表异步模块定义。下面是一个示例代码
define(['dep1', 'dep2'], function (dep1, dep2) {
//Define the module value by returning a value.
return function () {};
});
复制代码或者
// "simplified CommonJS wrapping" https://requirejs.org/docs/whyamd.html
define(function (require) {
var dep1 = require('dep1'),
dep2 = require('dep2');
return function () {};
});
复制代码-
AMD是异步(asynchronously)导入模块的(因此得名) - 一开始被提议的时候，
AMD是为前端而做的(而CJS是后端) -
AMD的语法不如CJS直观。我认为AMD和CJS完全相反
UMD
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 ($, _) {
// this is where I defined my module implementation
var Requester = { // ... };
return Requester;
}));
复制代码- 在前端和后端都适用（“通用”因此得名）
- 与
CJS或AMD不同，UMD更像是一种配置多个模块系统的模式。这里可以找到更多的模式 - 当使用
Rollup/Webpack之类的打包器时，UMD通常用作备用模块
ESM
ESM 代表 ES 模块。这是 Javascript 提出的实现一个标准模块系统的方案。我相信你们很多人都看到过这个:
import React from 'react';
复制代码或者其他更多的
import {foo, bar} from './myLib';
...
export default function() {
// your Function
};
export const function1() {...};
export const function2() {...};
复制代码- 在很多现代浏览器可以使用
- 它兼具两方面的优点：具有
CJS的简单语法和AMD的异步 - 得益于
ES6的静态模块结构，可以进行 Tree Shaking -
ESM允许像Rollup这样的打包器，删除不必要的代码，减少代码包可以获得更快的加载 - 可以在
HTML中调用，只要如下
<script type="module">
import {func1} from 'my-lib';
func1();
</script>