好久沒有寫文章了，前端時間一直瞎忙，最近總算有空閑時間可以好好學習下了，今天和大家分享一下有關前端包管理器的東西，主要把工作中常用的bower與最近一直在研究的browserify、duo以及快過時的component進行了一下介紹與對比，都是干貨，希望大家勿噴。啦啦啦，話不多說，開始吧：
一、Bower
Bower 是 twitter 推出的一款包管理工具，基於nodejs的模塊化思想，把功能分散到各個模塊中，讓模塊和模塊之間存在聯系，通過 Bower 來管理模塊間的這種聯系，其主要作用就是：為模塊的安裝、升級和刪除，提供一種統一的、可維護的管理模式。
包管理工具一般有以下的功能：
· 注冊機制：每個包需要確定一個唯一的 ID 使得搜索和下載的時候能夠正確匹配，所以包管理工具需要維護注冊信息，可以依賴其他平台。
· 文件存儲：確定文件存放的位置，下載的時候可以找到，當然這個地址在網絡上是可訪問的。
· 上傳下載：這是工具的主要功能，能提高包使用的便利性。比如想用jquery 只需要 install 一下就可以了，不用到處找下載。上傳並不是必備的，根據文件存儲的位置而定，但需要有一定的機制保障。
· 依賴分析：這也是包管理工具主要解決的問題之一，既然包之間是有聯系的，那么下載的時候就需要處理他們之間的依賴。下載一個包的時候也需要下載依賴的包。
首先，安裝Bower：
下面是bower常用的一些命令：
然后，使用bower install安裝模塊，下面是一些例子：
Bower的安裝實際上就是將需要的模塊及模塊的依賴下載到當前目錄的bower_components子目錄中，通常在安裝時會自動生成bower_components目錄，此外，還可以通過手動設置bower_components目錄的存放路徑，如下圖所示，在工程中添加.bowerrc配置文件，內容如下：
下載后，就可以直接將文件插入網頁。
bower update命令用於更新模塊：
如果不給出模塊名稱，則更新所有模塊。
bower uninstall 命令用於卸載模塊：
注意，默認情況下，會連所依賴的模塊一起卸載。比如，如果卸載jquery-ui，會連jquery一起卸載，除非還有別的模塊依賴jquery。
二、Browserify
Browserify的出現可以讓Nodejs模塊跑在瀏覽器中，用require()的語法格式來組織前端的代碼，加載npm的模塊。在瀏覽器中，調用browserify編譯后的代碼，同樣寫在<script>標簽中。
用 Browserify 的操作，分為3個步驟。
1. 寫node程序或者模塊
2. 用Browserify 預編譯成 bundle.js
3. 在HTML頁面中加載bundle.js
Browserify 的發布頁：http://browserify.org/
首先，安裝Browserify:
以下是browserify常用命令：
然后，寫一個服務器端腳本即nodejs文件：
腳本文件完成，現在可以用browserify來進行編譯：
“>”左邊的是要編譯的文件，右邊是編譯后的文件，文件的路徑可以自己指定。Browserify編譯的時候，會將腳本所依賴的模塊一起編譯進去。這意味着，它可以將多個模塊合並成一個文件。
編譯完成后直接將文件插入頁面，並在頁面調用編譯后的函數：
在瀏覽器中打開，查看效果：
三、component
Component是Express框架的作者TJ Holowaychuk開發的模塊管理器。它的基本思想，是將網頁所需要的各種資源（腳本、樣式表、圖片、字體等）編譯后，放到同一個目錄中（默認是build目錄）。
首先，安裝Component
常用命令：
然后，在項目根目錄下，新建一個index.html。
上面代碼中的build.css和build.js，就是Component所要生成的目標文件。接着，在項目根目錄下，新建一個component.json文件，作為項目的配置文件。
上面代碼中，指定JavaScript腳本和樣式表的原始文件是multiply.js和index.css兩個文件，並且樣式表依賴normalize模塊（不低於3.0.0版本，但不高於4.0版本）。這里需要注意，Component模塊的格式是"github用戶名/項目名"。
最后，運行component build命令編譯文件。
瀏覽器中查看效果:
在編譯的時候，Component自動使用autoprefixer為CSS屬性加上瀏覽器前綴。目前，Component似乎處於停止開發的狀態，代碼倉庫已經將近半年沒有變動過了，官方也推薦優先使用接下來介紹的Duo。
四、Duo
Duo是在Component的基礎上開發的，語法和配置文件基本通用，並且借鑒了Browserify和Go語言的一些特點，相當地強大和好用。
首先，安裝Duo。
然后，編寫一個本地文件test-duo.js。
上面代碼加載了uid和fmt兩個模塊，采用Component的"github用戶名/項目名"格式。
接着，編譯最終的腳本文件。
編譯后的文件可以直接插入網頁。
Duo不僅可以編譯JavaScript，還可以編譯CSS。下面是style.css的內容
編譯時，Duo自動將include.css，與當前樣式表合並成同一個文件。
編譯后，插入網頁即可。
瀏覽器中查看效果：
（完）
PS:希望廣大讀者朋友批評指證,如需轉載請注明出處.