快速瞭解AMD、CMD、CommonJS、ESM

1.ES6 Module

javascript在ES2015（ES6）中出現了語言層面的模塊（module）。

ES6的模塊既能夠用於瀏覽器端，也能夠用於服務器端（nodeJS）。

ES6模塊是靜態化的模塊加載，能夠實現靜態優化，在編譯時就能夠分析確認模塊的依賴和輸入輸出變量。

而AMD和CommonJS是在運行時才能確認這些東西。

2. AMD

在此以前，瀏覽器端使用的模塊加載方案主要是AMD，基於require.js;

AMD和CMD其實都是瀏覽器端的異步模塊加載規範；

AMD是RequireJS輸出的規範；CMD是seaJS輸出的規範；

用法

// 1. 想在頁面中使用AMD加載模塊，須要手動引入require.js
<script src="https://cdn.bootcss.com/require.js/2.3.6/require.js" data-main="main.js" defer async="true"></script>
// 2. 每個文件是一個模塊，AMD要求模塊使用define()定義模塊
// test.js 模塊
define(['jquery'], function(){ // 前面的數組表示依賴的模塊
   return function test() {
       console.log(test);
    }
})
// 3. 在main.js中引入test.js
require(['tset'], function(test) {
   test()
})

3.CommonJS

ES6以前，服務器端（nodeJS）是CommonJS規範。

09年，nodejs項目是使用CommonJS規範實現的模塊系統。

有一個全局的require()方法。

// 返回結果就是模塊名字
// CommonJS裏面的require用法和AMD裏面的require用法不一致
let {readFile} = require('fs');

導出是module.exports = {}

⚠️： CommonJS輸出的值是緩存，不是實時數據。可是ES6的export命令導出的是接口，能夠訪問模塊的實時數據。

CommonJS第一次require,就會執行整個腳本，並在內存中生成一個對象（緩存）：

{
    id: 'xxx', //模塊名，
    exports: {...}, //輸出的拷貝
    loaded: true/false // 加載是否完成
    ...
}
    

之後再require該模塊，直接到緩存中取exports對象的值。

即不管執行加載多少次，返回的都是第一次加載時返回的值。能夠手動清空緩存，清除以前的運行結果。

4. UMD

通用模塊化系統，兼容AMD和CommonJS；

一般以AMD爲基礎，而後再包裹一層特殊代碼實現CommonJS的兼容性。