js模块化规范进化史，CommonJS、AMD、CMD、UMD、ES module

1、CommonJS

require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;

优点：Node.js采用了这个规范，npm中模块数量多

缺点：同步加载模块，只有加载完成后才能执行后面的操作

2、AMD

异步模块定义规范（AMD）制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。

define(id?, dependencies?, factory);

第一个参数，id，是个字符串。它指的是定义中模块的名字

第二个参数，dependencies，是个定义中模块所依赖模块的数组。

第三个参数，factory，为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

define("module", ["dep1", "dep2"], function(d1, d2) {
  return someExportedValue;
});
require(["module", "../file"], function(module, file) { /* ... */ });

优点：依赖前置，在浏览器环境中异步加载模块，可以并行加载多个模块

缺点：开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅

3、CMD

Common Module Definition 规范和 AMD 很相似，尽量保持简单，并与 CommonJS 和 Node.js 的 Modules 规范保持了很大的兼容性。

define(function(require, exports, module) {
  var $ = require('jquery');
  var Spinning = require('./spinning');
  exports.doSomething = ...
  module.exports = ...
})

优点：依赖就近，延迟执行 可以很容易在 Node.js 中运行；

缺点：依赖 spm（static package manager） 打包，模块的加载逻辑偏重；

4、UMD

UMD规范是 AMD + CommonJS + Global Variable的风格组合产物。

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.Vue = factory());
}(this, function () { 'use strict' })

本质是一个立即执行函数

// rename function () { 'use strict' ...
function Vue () { 'use strict';
    /* */
}

// rename function (global, factory) ...
function UMD (global, factory) {
    /* deleted for clarity */
}

UMD(this, Vue);

5、ES module

export const name = 'bababa'
export default constant

import { ep1, ep2, ep3 } from './ep'
import ep from './ep'

了解更多 es module 看这篇文章 https://www.cnblogs.com/yujiaming890321/p/15745495.html