好久沒有寫文章了，前端時間一直瞎忙，最近總算有空閒時間可以好好學習下了，今天和大家分享一下有關前端包管理器的東西，主要把工作中常用的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，與當前樣式表合併成同一個檔案。

 編譯後，插入網頁即可。

 瀏覽器中檢視效果：

（完）