CommonJS、AMD、CMD和ES6模塊化區別

阿新 • • 發佈：2019-03-09

var web family ava def node 如果改變所有

本文參考自：https://www.cnblogs.com/chenguangliang/p/5856701.html

1、CommonJS

NodeJS是CommonJS規範的實現，webpack 也是以CommonJS的形式來書寫。node.js將javascript語言用於服務器端編程。

2、AMD

基於commonJS規範的nodeJS出來以後，服務端的模塊概念已經形成，很自然地，大家就想要客戶端模塊。而且最好兩者能夠兼容，一個模塊不用修改，在服務器和瀏覽器都可以運行。但是，由於一個重大的局限，使得CommonJS規範不適用於瀏覽器環境。

var math = require(‘math‘);

　　math.add( 
2, 3);

第二行math.add(2, 3)，在第一行require(‘math‘)之後運行，因此必須等math.js加載完成。也就是說，如果加載時間很長，整個應用就會停在那裏等。您會註意到 require 是同步的。

這對服務器端不是一個問題，因為所有的模塊都存放在本地硬盤，可以同步加載完成，等待時間就是硬盤的讀取時間。但是，對於瀏覽器，這卻是一個大問題，因為模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於"假死"狀態。

因此，瀏覽器端的模塊，不能采用"同步加載"（synchronous），只能采用"異步加載"（asynchronous）。這就是AMD規範誕生的背景。

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它采用異步方式加載模塊，模塊的加載不影響它後面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之後，這個回調函數才會運行。

3、CMD

CMD 推崇依賴就近，AMD 推崇依賴前置。

技術分享圖片

4、ES6 模塊化

ES6 模塊化采用靜態編譯，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。

對於 CommonJS 和 ES6 中的模塊化的兩者區別是：

前者支持動態導入，也就是 require(${path}/xx.js)

，後者目前不支持。
前者是同步導入，因為用於服務端，文件都在本地，同步導入即使卡住主線程影響也不大。而後者是異步導入，因為用於瀏覽器，需要下載文件，如果也采用同步導入會對渲染有很大影響。
前者在導出時都是值拷貝，就算導出的值變了，導入的值也不會改變，所以如果想更新值，必須重新導入一次。但是後者采用實時綁定的方式，導入導出的值都指向同一個內存地址，所以導入值會跟隨導出值變化

CommonJS、AMD、CMD和ES6模塊化區別

var web family ava def node 如果改變所有本文參考自：https://www.cnblogs.com/chenguangliang/p/5856701.html 1、CommonJS NodeJS是CommonJS規範的實現，webpac