文章連結

WEB 前端模組化都有什麼？

知識點

1. 根據平臺劃分
   瀏覽器 AMD、CMD 存在網路瓶頸，使用非同步載入
   非瀏覽器 CommonJS 直接操作 IO，同步載入

2. 瀏覽器
   AMD 依賴前置 requirejs
   CMD 就近依賴 seajs

AMD 與 CMD 都是在頁面初始化時載入完成所有模組，唯一的區別就是就近依賴是當模組被 require 時才會觸發執行。

1. CommonJS 的模組，是一個物件

   console.log('b.js ', require('./a.js').x);
   可以看成console.log('b.js', moduleA.x);
   在第二步中moduleA.x賦值為a1，於是輸出b.js, a1

2. 保留字
   CommonJS require exports / module.exports
   ES6 require export / import

模組輸出 載入方式
CommonJS 值拷貝 物件
ES6 引用（符號連結） 靜態解析

怎麼理解 值拷貝和引用拷貝？
值拷貝，相當於，在引用的檔案中，a 是 require 進來的，但是使用a ，實際上是 b = a, 我們實際上用的是 b
引用拷貝，在引用檔案中，我們引用了a , 對a的修改也生效

靜態解析：ES6 不需要和 CommonJS 一樣，需要把整個檔案載入進去，形成一個物件之後，才能知道自己有什麼，而是在編寫程式碼的過程中，程式碼是什麼，它就是什麼。

UMD = AMD + CommonJS

1. webpack
   webpack 在定義模組上，可以支援 CommonJS、AMD 和 ES6 的模組宣告方式，換句話說，就是你的模組如果是使用 CommonJS、AMD 或 ES6 的語法寫的，webpack 都支援