Javascript 模組化理解

原始時代： script標籤引入javascript檔案

-------------------- main.js ----------------------

define(['sum'],function(sum){

document.getElementById('result').innerHTML = sum(3);

})

-------------------- sum.js ----------------------

define(['add'],function(add)){

varsum =function(n){

returnadd(1,2) + n;

}

returnsum;

})

-------------------- add.js ----------------------

// add.js

define([],function(){

varadd =function(a, b){

returna + b;

};

returnadd;

});

瀏覽器載入index.html，而index.html又載入require.js。剩下的檔案及其依賴都是由require.js負責載入。

RequireJS 和 AMD 解決了我們以前所遇到的所有問題。然而，它也帶來了一些不那麼嚴重的問題：

1.AMD 的語法過於冗餘。因為所有東西都封裝在define函式中

2.陣列中的依賴列表必須與函式的引數列表匹配。如果存在許多依賴項，則很難維護依賴項的順序

3.在當前瀏覽器下（HTTP 1.1），載入很多小檔案會降低效能

模組打包器： Browserify

可以在瀏覽器中使用 CommonJS 模組，通過 Browserify 遍歷程式碼的依賴樹，並將依賴樹中的所有模組打包成一個檔案。

不同於 RequireJS ，Browserify 是一個命令列工具，需要依賴 NPM 環境，

困惑的時代： UMD

UMD 是一套用來識別當前環境支援的模組風格的 if/else 語句

無論是JavaScript 全域性模組物件，還是 CommonJS 或是 AMD 更是 UMD，都太麻煩了，額外增加了很多工作量，並且不易維護。

光明的時代： ES6模組語法

ES6 用import和export關鍵字來匯入和匯出模組

ES6 模組語法是簡潔的,雖然目前瀏覽器並未全部支援，但可以使用一些工具(babel)來轉化它

工程化的時代： Webpack

雖然gulp、grunt都號稱是工程化開發工具，，但個人感覺他們處理的東西還是比較基礎，對於模組依賴打包來說，支援不是非常好，反正我是不喜歡gulp.

Webpack 是一個 模組打包器，就像 Browserify 一樣，它會遍歷依賴樹，然後將其打包到一到多個檔案。

它與Browserify 不同之處就是 可以處理 CommonJS 、 AMD 和 ES6 模組，並且 Webpack 還有更多實用的東西，比如程式碼分離、載入器、外掛

簡潔的時代：Rollup

rollup 只會將需要的函式包含到打包檔案中，從而顯著減少打包檔案大小

發現 add.js的sub()函式並沒有包含在這個打包檔案中，因為沒有引用它。