快捷導(dǎo)航

Web前端開發(fā)工具——bower依賴包管理工具

更新時間：2016年03月29日 11:26:27 作者：追夢子

Bower 是 twitter 推出的一款包管理工具，基于nodejs的模塊化思想，把功能分散到各個模塊中，讓模塊和模塊之間存在聯(lián)系，通過 Bower 來管理模塊間的這種聯(lián)系,本文給大家介紹bower依賴包管理工具，感興趣的朋友一起學(xué)習(xí)

Bower 是 twitter 推出的一款包管理工具，基于nodejs的模塊化思想，把功能分散到各個模塊中，讓模塊和模塊之間存在聯(lián)系，通過 Bower 來管理模塊間的這種聯(lián)系。

包管理工具一般有以下的功能：

a)注冊機制：每個包需要確定一個唯一的 ID 使得搜索和下載的時候能夠正確匹配，所以包管理工具需要維護注冊信息，可以依賴其他平臺。

b)文件存儲：確定文件存放的位置，下載的時候可以找到，當(dāng)然這個地址在網(wǎng)絡(luò)上是可訪問的。

c)上傳下載：這是工具的主要功能，能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了，不用到處找下載。上傳并不是必備的，根據(jù)文件存儲的位置而定，但需要有一定的機制保障。

d)依賴分析：這也是包管理工具主要解決的問題之一，既然包之間是有聯(lián)系的，那么下載的時候就需要處理他們之間的依賴。下載一個包的時候也需要下載依賴的包。

由于bower是基于nodejs開發(fā)的，所以你首先必須得有個nodejs環(huán)境，至于這么安裝nodejs網(wǎng)上一大堆教程，對了使用bower還需要安裝git，這里就不多說了。

bower帶來的好處

　　假如你有一個項目，里面需要用到了JQuery在正常情況下我們需要到j(luò)Query官方網(wǎng)站下載庫，這樣的話，每次jquery更新，我們又要到j(luò)Query官方下載，那這樣的話就很麻煩了，如果有一款工具能夠輸入一個命令讓我們選擇要下載的版本，并且如果想把我們項目里面的所有庫更新到最新版也只需要輸入一個命令那是不是很方便，bower的另外一個好處就是如果你安裝bootstrap那么它會自動下載jquery，因為bootstrap依賴了jquery，簡單的來說只要我們下載的那個庫依賴了另外的庫那么bower會自動幫我們下載依賴的庫，bower就是這么強大。

bower的安裝

　　npm install -g bower 表示安裝到全局環(huán)境

bower的使用

　　1. 通過bower下載庫

　　　　bower install (包的名稱如：jquery)[#版本如：#1.7] 版本可選，如果沒有寫，默認下載最新版

　　　　如:bower install bootstrap#2.2

　　2. 如果需要更新所以的庫，我們可以輸入以下命令

　　　　bower update

如果需要生成一個你下載個包的所以信息，比如你在一個團隊中，你想讓其他人知道你都用了哪些庫，并且它們的版本是多少，那么我們可以通過以下命令來完成。
　　我們需要先初始化一個包描述。它會在你的當(dāng)前執(zhí)行環(huán)境目錄中創(chuàng)建一個bower.json的目錄

　　　　`bower init -y`

　　然后通過

　　　　`bower install jquery --save`

　　它會在bower.json文件中加入jquery的版本信息，如果你想添加多個可以通過空格bower install jquery bootstrap less --save

以下是bower.json文件的內(nèi)容

{
"name": "down",
"authors": [
"xxxxxxxx"
],
"description": "",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap": "^3.3.6",
"less": "^2.6.1",
"jquery": "^2.2.2"
}
}

　　當(dāng)然如果你是nodejs新手或許你會有些茫然，因為這里并不是一個nodejs基礎(chǔ)教程，如果你想了解想學(xué)node的話還需要到網(wǎng)絡(luò)中學(xué)習(xí)。

　　bower除了這些好處以為，還有一些更加強大的功能，那就需要大家去發(fā)現(xiàn)了，我這里就不再介紹了，畢竟我也是剛剛開始學(xué)習(xí)node

------------------------------------------------------分割線---------------------------------------

bower與npm的關(guān)系

　　　安裝bower需要通過npm來安裝

bower與npm的區(qū)別：

　　1. 在之前的npm版本中，它不能共享依賴的代碼，也是就說，在以前的npm版本中，如果你下載了一個bootstrap，因為bootstrap是依賴jquery的，所以它會把jquery也下載下來，但是如果你的另外一個庫也用到了jquery，那么它也會去下載一個jquery，這樣的話，代碼就重復(fù)了。

　　它們的結(jié)構(gòu)就像這樣：

　　　　bootstrap\jQuery
　　　　xxxxxxxxx\jQuery

　　它們重復(fù)了對吧，不過好像在npm的最新版本中解決了這個問題。

　　2. npm 會將開發(fā)環(huán)境一起下載下來，bower 只會下載編譯后的前度模塊。

　　3. NPM主要運用于Node.js項目的內(nèi)部依賴包管理，安裝的模塊位于項目根目錄下的node_modules文件夾內(nèi)。而Bower大部分情況下用于前端開發(fā)，對于CSS/JS/模板等內(nèi)容進行依賴管理，依賴的下載目錄結(jié)構(gòu)可以自定義。 -- 本段內(nèi)容是在網(wǎng)上找到的。

　　所謂的自定義目錄結(jié)構(gòu)的意思是說，你在那個文件目錄打開的bower，那么它就會在那個文件下，下載你需要的包，而npm就不支持這個。

總結(jié)：我們可以簡單的來理解npm是用來管理nodejs模塊的也就是包，而bower是用來管理我們前端庫的。

有關(guān)Web前端開發(fā)工具——bower依賴包管理工具小編就給大家介紹到這里，希望對大家有所幫助！

您可能感興趣的文章: