快捷導(dǎo)航

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

更新時(shí)間：2016年03月29日 11:26:27 作者：追夢(mèng)子

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

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

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

a)注冊(cè)機(jī)制：每個(gè)包需要確定一個(gè)唯一的 ID 使得搜索和下載的時(shí)候能夠正確匹配，所以包管理工具需要維護(hù)注冊(cè)信息，可以依賴其他平臺(tái)。

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

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

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

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

bower帶來(lái)的好處

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

bower的安裝

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

bower的使用

　　1. 通過(guò)bower下載庫(kù)

　　　　bower install (包的名稱如：jquery)[#版本如：#1.7] 版本可選，如果沒(méi)有寫(xiě)，默認(rèn)下載最新版

　　　　如:bower install bootstrap#2.2

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

　　　　bower update

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

　　　　`bower init -y`

　　然后通過(guò)

　　　　`bower install jquery --save`

　　它會(huì)在bower.json文件中加入jquery的版本信息，如果你想添加多個(gè)可以通過(guò)空格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新手或許你會(huì)有些茫然，因?yàn)檫@里并不是一個(gè)nodejs基礎(chǔ)教程，如果你想了解想學(xué)node的話還需要到網(wǎng)絡(luò)中學(xué)習(xí)。

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

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

bower與npm的關(guān)系

　　　安裝bower需要通過(guò)npm來(lái)安裝

bower與npm的區(qū)別：

　　1. 在之前的npm版本中，它不能共享依賴的代碼，也是就說(shuō)，在以前的npm版本中，如果你下載了一個(gè)bootstrap，因?yàn)閎ootstrap是依賴jquery的，所以它會(huì)把jquery也下載下來(lái)，但是如果你的另外一個(gè)庫(kù)也用到了jquery，那么它也會(huì)去下載一個(gè)jquery，這樣的話，代碼就重復(fù)了。

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

　　　　bootstrap\jQuery
　　　　xxxxxxxxx\jQuery

　　它們重復(fù)了對(duì)吧，不過(guò)好像在npm的最新版本中解決了這個(gè)問(wèn)題。

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

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

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

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

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

您可能感興趣的文章: