JavaScript里面的模块化4种方式（CommonJS，AMD，CMD，es6Module）

JS的模块化大致有CommonJS，AMD，CMD，es6Module四种。那么它们到底有什么相同和不同之处呢？

CommonJS

CommonJS：在Node中使用，同步加载模块。在esModule还没有出现时，为Node主要模块化解决方案。
导入：

const moduleA = require("./modulePath") 
const { moduleB } = require("./modulePath") 

导出：

module.exports = moduleA // 默认模块
module.exports.moduleB = moduleB // 具名模块

AMD

由于CommonJS规范是同步的，并不适合在浏览器端使用，因为浏览器资源和请求都是异步的，所以模块之间的引用应该也是异步的。

AMD：在浏览器使用，异步加载模块
导入：

require(['moduleA'], function(mA) { ...... })

导出：

define(function() { return moduleA })

require.js使用AMD规范

CMD

CMD：在浏览器中使用，异步加载模块
导入：

define(function(require) {
  let moduleA = require("./modulePath") // 同步
  let moduleB = async("./modulePath", function(mB) { ...... }) // 异步
})

导出：

define(function(requie, exports, module) {
  module.exports = moduleA
})

sea.js使用CMD规范

AMD和CMD的不同

CMD的加载是按照就近规则进行的，AMD依赖的是前置；CMD在加载的使用的时候会把模块变为字符串解析一遍才知道依赖了哪个模块；

es6Module

es6Module：在Node和浏览器中都可以使用.
导入：

import moduleA from "./modulePath" // 默认模块
import { moduleB } from "./modulePath" // 具名模块

导出：

export default (x, y) => x + y // 导出默认模块
export function moduleB() {} // 导出具名模块

CommonJS和es6Module的不同

CommonJS的模块导入require()是同步的，不会返回Promise或者回调函数。会立刻读取和执行文件。

es6Module的模块导入是异步的，调用import()语句时不会立刻运行导入的文件。而是会异步读取文件。构建模块依赖图。最后才开始运行代码，对应依赖时才开始运行。

es6Module模块默认使用严格模式，this不指向全局对象，可以使用*await（Top-level await）。所以两种模块导入模式完全不能兼容。在html中script标签需要添加属性type="module"时才能导入es6Module。