bower使用小記

什么是bower

Bower —— A package manager for the web
bower是前端包管理工具。我個人認(rèn)為就是管理前端所依賴的庫的管理工具。當(dāng)一個項目用到多種庫時,管理會出現(xiàn)有些麻煩。

包的概念

當(dāng)安裝多個包時,會將這些資源的配置文件寫在bower.json中。

安裝bower

首先確定你的系統(tǒng)安裝了nodejs.之后就可以用npm(n是專門管理node模塊的管理工具,而bower是node的模塊)包管理工具下載并

//全局安裝bower:
npm install -g bower
//全局安裝Bower后,可以查看Bower的幫助信息,使用命令:
bower help

bower的使用

注:bower下載安裝依賴庫實際上是使用git進行下載。對于linux系統(tǒng),由于默認(rèn)都有安裝git,所以一般沒問題。但是windows系統(tǒng)一般沒有g(shù)it。在windows系統(tǒng)下需要確定安裝了git客戶端,建議使用同捆的git bash命令行來執(zhí)行bower install命令。或者把git目錄加入windows的環(huán)境變量中,再在命令行中執(zhí)行bower install命令。
使用bower安裝某個特定類庫,例如jquery:

bower install jquery

執(zhí)行完每一條命令后,bower都會自動下載對應(yīng)庫文件bower_commponts/目錄

bower install jquery-ui#1.10.1

上面的命令指定安裝jquery-ui的1.10.1版。
如果某個庫依賴另一個庫,安裝時默認(rèn)將所依賴的庫一起安裝。比如,jquery-ui依賴jquery,安裝時會連jquery一起安裝。
安裝后的庫默認(rèn)存放在項目的bower_components子目錄,如果要指定其他位置,可在.bowerrc文件的directory屬性設(shè)置。
{ "directory" : "public/components"}

bower install jquery --save

然后bower就會從遠(yuǎn)程下載jquery最新版本到你的js/lib目錄下其中--save參數(shù)是保存配置到你的bower.json.

Bower 可使用如下幾種方式下載文件
#已經(jīng)注冊的包,使用簡單即可

bower install jquery

#GitHub上的項目,使用名稱即可

bower install desandro/masonry

#GitHub上的項目

bower install git://github.com/......

#直接通過URL下載

bower install (網(wǎng)址)

使用bower更新某個特定類庫,例如jquery:

bower update jquery

刪除包,例如jquery (如果包已經(jīng)被依賴,則不能刪除)

bower uninstall jquery

更多的命令請用help查看。

bower help

維護依賴

使用

bower install package --save

能夠?qū)惭b到你的項目中,同時將依賴關(guān)系寫入到bower.json
的 dependencies數(shù)組。
同理,使用

bower install package --save-dev

可以將包寫入到 bower.json 的 devDependencies數(shù)組。

bower初始化

bower init

會提示你輸入一些基本信息,根據(jù)提示按回車或者空格即可,然后會生成一個bower.json文件,用來保存該項目的配置,如下:
(未完成)
bower.json 的規(guī)范中的選項,主要包括:
name
包名,必選。
version
有意義的版本號。
main
字符串或者數(shù)組,指定主要會用到包里面哪些文件。
ignore
數(shù)組,一系列文件名或者目錄,告訴bower在安裝包的時候忽略指定的內(nèi)容。
keywords
字符串?dāng)?shù)組,推薦添加,主要是幫助用戶能夠搜索到你的包。
dependencies
哈希結(jié)構(gòu),依賴的包,可以指定版本號,版本號范圍參考
devDependencies
哈希結(jié)構(gòu),生產(chǎn)環(huán)境下依賴的包,版本號范圍參考
private
布爾值,設(shè)置為true代表你想保持私有,并且將來不會發(fā)布它。

包的信息

比如我們想要查找jquery都有哪些個版本,輸入如下命令:

bower info jquery

會看到j(luò)query的bower.json的信息,和可用的版本信息可以看到j(luò)query最新的兼容版版本為1.11.3

包的更新

上面安裝的是最新版的高版本jquery,假如想要兼容低版本瀏覽器的呢?已經(jīng)查到兼容低版本瀏覽器的jquery版本為1.11.3,下面直接修改bower.json文件中的jquery版本號如下:

"dependencies": { "jquery": "~1.11.3" }

然后執(zhí)行如下命令:

bower update

bower
就會為你切換jquery的版本了

包的查找

還有一個很重要的功能,就是包的查找,比如我想要安bootstrap的某個插件,但是記不住名字了,就可以直接在命令行輸入:

bower search bootstrap

bower就會列出包含字符串bootstrap的可用包了

包的卸載

卸載包可以使用uninstall 命令:

bower uninstall jquery

bower install bootstrap
bower會自動從github上down最新的代碼,而且,會自動將依賴包jquery也下載進來。

指定版本:
bower install jquery#1.7.2
bower install bootstrap#3.3.5 --save

多版本共存:
同時安裝一個package的不同版本(多版本共存), 比如安裝jquery v1.7.0,并且安裝v1.9.1以及最新版本的jquery(目前是2.1.1), 像下面這樣安裝完成后,你的bower_components目錄下就會同時存在jquery-older目錄(1.7.0), jquery-old目錄(1.9.1), jquery目錄(最新版)。
安裝jquery v1.7.0bower install jquery-older=juqery#1.7.0 [<options>]
安裝jquery v1.9.0bower install jquery-old=juqery#1.9.1 [<options>]
安裝最新版jquerybower install jquery [<options>]

bower常用命令

cache:bower緩存管理
help:顯示Bower命令的幫助信息
home:通過瀏覽器打開一個包的github發(fā)布頁
info:查看包的信息
init:創(chuàng)建bower.json文件
install:安裝包到項目
link:在本地bower庫建立一個項目鏈接
list:列出項目已經(jīng)安裝的包
lookup:根據(jù)包名查詢包的URL
prune:刪除項目無關(guān)的包
register:注冊一個包
search:搜索項目的包
update:更新項目的包
uninstall:刪除項目的包

參考[https://segmentfault.com/a/1190000000349555]

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,973評論 19 139
  • bower的安裝 1,首先在我的系統(tǒng) 安裝 nodejs。因為我的系統(tǒng)是windows,還需要安裝msysgit,...
    JerryChen_閱讀 73,913評論 4 10
  • 由上篇《 Node.js 自動化工具 - YEOMAN 》接著開始研究另一個新的工具 Bower 。 我們在擁有腳...
    Max_Law閱讀 3,172評論 3 4
  • 1、什么是node? 它不是JS文件,也不是JS框架,而是Server side JavaScript runti...
    J_L_L閱讀 1,601評論 0 4
  • 如果你是圓臉女生,會特別可愛。因為肉嘟嘟的總有讓人捏一下的沖動。 如果你是圓臉女生,會特別吃虧。因為只看臉,總覺得...
    左佳妮閱讀 254評論 0 0