commonJS、AMD、es模塊化 區別（表格比較）

commonJS、AMD、es6模塊化 區別（表格比較）：

區別項	es模塊化	commonJS	AMD
可用於服務端仍是瀏覽器	服務端和瀏覽器	服務端	瀏覽器
模塊依賴關係什麼時候肯定(即：什麼時候加載模塊)	編譯時	運行時	運行時
設計思想	儘可能的靜態化
模塊是否是對象	不是	是
是否總體加載模塊(即加載的全部方法)	否	是
是不是動態更新(即經過接口,能夠取到模塊內部實時的值)	是。es module輸出的是值的引用	不是。commonJS模塊輸出的是值的拷貝，不存在動態更新
模塊變量是不是隻讀的	是。緣由：ES6 輸入的模塊變量，只是一個「符號鏈接」，因此這個變量是隻讀的，對它進行從新賦值會報錯。

• commonJS模塊就是對象，總體加載模塊（即加載的全部方法）

• ES6 模塊不是對象，而是經過export命令顯式指定輸出的代碼，再經過import命令輸入。

• export命令規定的是對外的接口，必須與模塊內部的變量創建一一對應關係。

// 報錯
export 1;
// 報錯
var m = 1;
export m;

上面兩種寫法都會報錯，由於沒有提供對外的接口。第一種寫法直接輸出1，第二種寫法經過變量m，仍是直接輸出1。1只是一個值，不是接口。正確的寫法是下面這樣。

// 寫法一
export var m = 1;
// 寫法二
var m = 1;
export {m};
// 寫法三
var n = 1;
export {n as m};

一樣的，function和class的輸出，也必須遵照這樣的寫法。

// 報錯
function f() {}
export f;
// 正確
export function f() {};
// 正確
function f() {}
export {f};

• export語句輸出的接口，與其對應的值是動態綁定關係，即經過該接口，能夠取到模塊內部實時的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代碼輸出變量foo，值爲bar，500毫秒以後變成baz。
這一點與 CommonJS 規範徹底不一樣。CommonJS 模塊輸出的是值的緩存，不存在動態更新。

• export命令和import命令能夠出如今模塊的任何位置，只要處於模塊頂層就能夠。
  若是處於塊級做用域內，就會報錯，這是由於處於條件代碼塊之中，就無法作靜態優化了，違背了ES6模塊的設計初衷。

• import命令具備提高效果，會提高到整個模塊的頭部，首先執行。

foo();=
import { foo } from 'my_module';

上面的代碼不會報錯，由於import的執行早於foo的調用。這種行爲的本質是，import命令是編譯階段執行的，在代碼運行以前。

• 目前階段，經過 Babel 轉碼，CommonJS 模塊的require命令和 ES6 模塊的import命令，能夠寫在同一個模塊裏面，可是最好不要這樣作。由於import在靜態解析階段執行，因此它是一個模塊之中最先執行的。下面的代碼可能不會獲得預期結果。

require('core-js/modules/es6.symbol');
require('core-js/modules/es6.promise');
import React from 'React';

• import語句會執行所加載的模塊，所以能夠有下面的寫法。

import 'lodash';

上面代碼僅僅執行lodash模塊，可是不輸入任何值。

• 若是模塊名不含路徑，那麼import命令會去node_modules目錄尋找這個模塊。

import 'baz';
import 'abc/123';

若是模塊名包含路徑，那麼import命令會按照路徑去尋找這個名字的腳本文件。

import 'file:///etc/config/app.json';
import './foo';
import './foo?search';
import '../bar';
import '/baz';

• 若是腳本文件省略了後綴名，好比import './foo'，Node 會依次嘗試四個後綴名：./foo.mjs、./foo.js、./foo.json、./foo.node。 若是這些腳本文件都不存在，Node 就會去加載./foo/package.json的main字段指定的腳本。 若是./foo/package.json不存在或者沒有main字段，那麼就會依次加載./foo/index.mjs、./foo/index.js、./foo/index.json、./foo/index.node。 若是以上四個文件仍是都不存在，就會拋出錯誤。