扒一扒前端包管理器

很久沒有寫文章了，前端時間一直瞎忙，最近總算有空閒時間能夠好好學習下了，今天和你們分享一下有關前端包管理器的東西，主要把工做中經常使用的bower與最近一直在研究的browserify、duo以及快過期的component進行了一下介紹與對比，都是乾貨，但願你們勿噴。啦啦啦，話很少說，開始吧：

 

1、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。

 

2、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編譯的時候，會將腳本所依賴的模塊一塊兒編譯進去。這意味着，它能夠將多個模塊合併成一個文件。

 編譯完成後直接將文件插入頁面，並在頁面調用編譯後的函數：

在瀏覽器中打開，查看效果：

 

 3、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。

 4、Duo

Duo是在Component的基礎上開發的，語法和配置文件基本通用，而且借鑑了Browserify和Go語言的一些特色，至關地強大和好用。

 首先，安裝Duo。

 而後，編寫一個本地文件test-duo.js。

 上面代碼加載了uid和fmt兩個模塊，採用Component的"github用戶名/項目名"格式。

接着，編譯最終的腳本文件。

 編譯後的文件能夠直接插入網頁。

Duo不只能夠編譯JavaScript，還能夠編譯CSS。下面是style.css的內容

 編譯時，Duo自動將include.css，與當前樣式表合併成同一個文件。

 

 編譯後，插入網頁便可。

 瀏覽器中查看效果：

 

（完）

PS:但願廣大讀者朋友批評指證,如需轉載請註明出處.