前端模塊化的優點
1、作用域汙染
小明定義了 var name = 'xiaoming';
N ~ 天之後：
小王又定義了一個 var name = 'xiaowang';
2、防止代碼暴漏可被修改：
為了解決全局變量的汙染，早期的前端的先驅們則是以對象封裝的方式來寫JS代碼：
var utils = {
'version':'1.3' };
然而這種方式不可以避免的是對象中的屬性可被直接修改：utils.version = 2.0 。
3、維護成本的提升。
如果代碼毫無模塊化可言，那麼小明今天寫的代碼，若干天再讓小明自己去看，恐怕也無從下手。
4、複用與效率
模塊與非模塊的目的就是為了複用，提高效率
什麼是前端模塊管理器
為了解決瀏覽器本身不能提供模塊管理機制的問題，前端的模塊管理器（package management）應運而生。它可以輕鬆管理各種JavaScript腳本的依賴關係，自動加載各個模塊，使得網頁結構清晰合理。不誇張地說，將來 所有 的前端JavaScript項目，應該都會採用這種方式開發。
幾款前端模塊管理器介紹
- component
Component 是Express框架的作者TJ Holowaychuk開發的模塊管理器。它的基本思想，是將網頁所需要的各種資源（腳本、樣式表、圖片、字體等）編譯後，放到同一個目錄中（默認是build目錄）。
首先，安裝Component。
上面代碼之所以需要指定Component的版本，是因為1.0版還沒有正式發佈。
然後，在項目根目錄下，新建一個index.html。
上面代碼中的build.css和build.js，就是Component所要生成的目標文件；接著，在項目根目錄下，新建一個component.json文件，作為項目的配置文件。
上面代碼中，指定JavaScript腳本和樣式表的原始文件是index.js和index.css兩個文件，並且樣式表依賴normalize模塊（不低於3.0.0版本，但不高於4.0版本）。這裡需要注意，Component模塊的格式是"github用戶名/項目名"。最後，運行component build命令編譯文件。
在編譯的時候，Component自動使用autoprefixer為CSS屬性加上瀏覽器前綴。
- Bower
Bower 的主要作用是，為模塊的安裝、升級和刪除，提供一種統一的、可維護的管理模式。
首先，安裝Bower。
然後，使用bower install命令安裝各種模塊。下面是一些例子。
所謂"安裝"，就是將該模塊下載到當前目錄的bower_components子目錄中。下載後，就可以直接插入網頁。
bower update命令用於更新模塊。
如果不給出模塊的名稱，則更新所有模塊；bower uninstall命令用於卸載模塊。
注意，默認情況下，會連所依賴的模塊一起卸載。比如，如果卸載jquery-ui，會連jquery一起卸載，除非還有別的模塊依賴jquery。
- Browserify
Browserify本身不是模塊管理器，只是讓服務器端的CommonJS格式的模塊可以運行在瀏覽器端。這意味著通過它，我們可以使用Node.js的npm模塊管理器。所以，實際上，它等於間接為瀏覽器提供了npm的功能。
首先，安裝Browserify。
然後，編寫一個服務器端腳本。
上面代碼中uniq模塊是CommonJS格式，無法在瀏覽器中運行。這時，Browserify就登場了，將上面代碼編譯為瀏覽器腳本。
生成的bundle.js可以直接插入網頁。
Browserify編譯的時候，會將腳本所依賴的模塊一起編譯進去。這意味著，它可以將多個模塊合併成一個文件。
閱讀更多 咱小二 的文章
