Web前端開發(fā)工具——bower依賴包管理工具
Bower 是 twitter 推出的一款包管理工具,基于nodejs的模塊化思想,把功能分散到各個(gè)模塊中,讓模塊和模塊之間存在聯(lián)系,通過 Bower 來管理模塊間的這種聯(lián)系。
包管理工具一般有以下的功能:
a)注冊(cè)機(jī)制:每個(gè)包需要確定一個(gè)唯一的 ID 使得搜索和下載的時(shí)候能夠正確匹配,所以包管理工具需要維護(hù)注冊(cè)信息,可以依賴其他平臺(tái)。
b)文件存儲(chǔ):確定文件存放的位置,下載的時(shí)候可以找到,當(dāng)然這個(gè)地址在網(wǎng)絡(luò)上是可訪問的。
c)上傳下載:這是工具的主要功能,能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了,不用到處找下載。上傳并不是必備的,根據(jù)文件存儲(chǔ)的位置而定,但需要有一定的機(jī)制保障。
d)依賴分析:這也是包管理工具主要解決的問題之一,既然包之間是有聯(lián)系的,那么下載的時(shí)候就需要處理他們之間的依賴。下載一個(gè)包的時(shí)候也需要下載依賴的包。
由于bower是基于nodejs開發(fā)的,所以你首先必須得有個(gè)nodejs環(huán)境,至于這么安裝nodejs網(wǎng)上一大堆教程,對(duì)了使用bower還需要安裝git,這里就不多說了。
bower帶來的好處
假如你有一個(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)單的來說只要我們下載的那個(gè)庫(kù)依賴了另外的庫(kù)那么bower會(huì)自動(dòng)幫我們下載依賴的庫(kù),bower就是這么強(qiáng)大。
bower的安裝
npm install -g bower 表示安裝到全局環(huán)境
bower的使用
1. 通過bower下載庫(kù)
bower install (包的名稱如:jquery)[#版本如:#1.7] 版本可選,如果沒有寫,默認(rèn)下載最新版
如:bower install bootstrap#2.2
2. 如果需要更新所以的庫(kù),我們可以輸入以下命令
bower update
如果需要生成一個(gè)你下載個(gè)包的所以信息,比如你在一個(gè)團(tuán)隊(duì)中,你想讓其他人知道你都用了哪些庫(kù),并且它們的版本是多少,那么我們可以通過以下命令來完成。
我們需要先初始化一個(gè)包描述。它會(huì)在你的當(dāng)前執(zhí)行環(huán)境目錄中創(chuàng)建一個(gè)bower.json的目錄
`bower init -y`
然后通過
`bower install jquery --save`
它會(huì)在bower.json文件中加入jquery的版本信息,如果你想添加多個(gè)可以通過空格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)了,我這里就不再介紹了,畢竟我也是剛剛開始學(xué)習(xí)node
------------------------------------------------------分割線---------------------------------------
bower與npm的關(guān)系
安裝bower需要通過npm來安裝
bower與npm的區(qū)別:
1. 在之前的npm版本中,它不能共享依賴的代碼,也是就說,在以前的npm版本中,如果你下載了一個(gè)bootstrap,因?yàn)閎ootstrap是依賴jquery的,所以它會(huì)把jquery也下載下來,但是如果你的另外一個(gè)庫(kù)也用到了jquery,那么它也會(huì)去下載一個(gè)jquery,這樣的話,代碼就重復(fù)了。
它們的結(jié)構(gòu)就像這樣:
bootstrap\jQuery
xxxxxxxxx\jQuery
它們重復(fù)了對(duì)吧,不過好像在npm的最新版本中解決了這個(gè)問題。
2. npm 會(huì)將開發(fā)環(huán)境一起下載下來,bower 只會(huì)下載 編譯后的前度模塊。
3. NPM主要運(yùn)用于Node.js項(xiàng)目的內(nèi)部依賴包管理,安裝的模塊位于項(xiàng)目根目錄下的node_modules文件夾內(nèi)。而Bower大部分情況下用于前端開發(fā),對(duì)于CSS/JS/模板等內(nèi)容進(jìn)行依賴管理,依賴的下載目錄結(jié)構(gòu)可以自定義。 -- 本段內(nèi)容是在網(wǎng)上找到的。
所謂的自定義目錄結(jié)構(gòu)的意思是說,你在那個(gè)文件目錄打開的bower,那么它就會(huì)在那個(gè)文件下,下載你需要的包,而npm就不支持這個(gè)。
總結(jié):我們可以簡(jiǎn)單的來理解npm是用來管理nodejs模塊的也就是包,而bower是用來管理我們前端庫(kù)的。
有關(guān)Web前端開發(fā)工具——bower依賴包管理工具小編就給大家介紹到這里,希望對(duì)大家有所幫助!
相關(guān)文章
PDF.js前端開發(fā)使用代碼示例及實(shí)用技巧
pdf.js是一款Nozilla開發(fā)的、用于網(wǎng)頁(yè)上顯示pdf文檔的Javascript庫(kù),提供pdf文件的在線閱讀,這篇文章主要給大家介紹了關(guān)于PDF.js前端開發(fā)使用實(shí)用技巧的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
前端項(xiàng)目中報(bào)錯(cuò)Uncaught?(in?promise)的解決方法
最近在做項(xiàng)目的時(shí)候控制臺(tái)報(bào)了一個(gè)錯(cuò)Uncaught(in promise) false,這篇文章主要給大家介紹了關(guān)于前端項(xiàng)目中報(bào)錯(cuò)Uncaught?(in?promise)的解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
Javascript前端UI框架Kit使用指南之Kitjs簡(jiǎn)介
本文給大家簡(jiǎn)單介紹了一款優(yōu)秀的Javascript前端UI框架--Kitjs,支持PC端以及手機(jī)開發(fā)領(lǐng)域,非常的全面,這里推薦給有需要的小伙伴。2014-11-11
整理Javascript基礎(chǔ)語(yǔ)法學(xué)習(xí)筆記
整理Javascript基礎(chǔ)語(yǔ)法學(xué)習(xí)筆記,之前一系列的文章是跟我學(xué)習(xí)Javascript,本文就是進(jìn)一步學(xué)習(xí)javascript基礎(chǔ)語(yǔ)法,希望大家繼續(xù)關(guān)注2015-11-11

