Bower:客戶端庫管理工具javascript
來自《JavaScript 標準參考教程(alpha)》,by 阮一峯css
隨着網頁功能變得愈來愈複雜,同一張網頁加載多個JavaScript函數庫早已經是屢見不鮮。開發者愈來愈須要一個工具,對瀏覽器端的各類庫進行管理,好比搜索、自動安裝\卸載、檢查更新、確保依賴關係等等。Bower就是爲了解決這個問題而誕生的針對瀏覽器端的庫管理工具。html
Bower基於node.js,因此安裝以前,必須先確保已安裝node.js。java
$ sudo npm install bower --global
運行上面的命令之後,Bower就已經安裝在你的系統中了。運行幫助命令,查看Bower是否安裝成功。node
$ bower help
下面的命令能夠更新或卸載Bower。jquery
# 更新 $ sudo npm update -g bower # 卸載 $ sudo npm uninstall --global bower
在項目根目錄下,運行下面的命令,進行初始化。git
$ bower init
經過回答幾個問題,就會自動生成bower.json文件。這是項目的配置文件,下面是一個例子。github
{ "name": "app-name", "version": "0.1.0", "main": ["path/to/app.html", "path/to/app.css", "path/to/app.js"], "ignore": [".jshintrc","**/*.txt"], "dependencies": { "sass-bootstrap": "~3.0.0", "modernizr": "~2.6.2", "jquery": "latests" }, "devDependencies": {"qunit": ">1.11.0"} }
有了bower.json文件之後,就能夠用bower install命令,一會兒安裝全部庫。ajax
$ bower install
bower.json文件存放在庫的根目錄下,它的做用是(1)保存項目的庫信息,供項目安裝時使用,(2)向Bower.com提交你的庫,該網站會讀取bower.json,列入在線索引。npm
$ bower register <my-package-name> <git-endpoint> # 實例:在 bower.com 登記jquery $ bower register jquery git://github.com/jquery/jquery
注意,若是你的庫與現有的庫重名,就會提交失敗。
bower install命令用於安裝某個庫,須要指明庫的名字。
$ bower install backbone
Bower會使用庫的名字,去在線索引中搜索該庫的網址。某些狀況下,若是一個庫很新(或者你不想使用默認網址),可能須要咱們手動指定該庫的網址。
$ bower install git://github.com/documentcloud/backbone.git $ bower install http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js $ bower install ./some/path/relative/to/this/directory/backbone.js
上面的命令說明,指定的網址能夠是github地址、http網址、本地文件。
默認狀況下,會安裝該庫的最新版本,可是也能夠手動指定版本號。
$ bower install jquery-ui#1.10.1
上面的命令指定安裝jquery-ui的1.10.1版。
若是某個庫依賴另外一個庫,安裝時默認將所依賴的庫一塊兒安裝。好比,jquery-ui依賴jquery,安裝時會連jquery一塊兒安裝。
安裝後的庫默認存放在項目的bower_components子目錄,若是要指定其餘位置,可在.bowerrc文件的directory屬性設置。
bower search命令用於使用關鍵字,從在線索引中搜索相關庫。
bower search jquery
上面命令會獲得下面這樣的結果。
Search results: jquery git://github.com/components/jquery.git jquery-ui git://github.com/components/jqueryui jquery.cookie git://github.com/carhartl/jquery-cookie.git jquery-placeholder git://github.com/mathiasbynens/jquery-placeholder.git jquery-file-upload git://github.com/blueimp/jQuery-File-Upload.git jasmine-jquery git://github.com/velesin/jasmine-jquery jquery.ui git://github.com/jquery/jquery-ui.git ...
bower info命令用於查看某個庫的詳細信息。
bower info jquery-ui
查看結果會列出該庫的依賴關係(dependencies),以及能夠獲得的版本(Available versions)。
bower update用於更新一個庫,將其更新爲最新版本。
$ bower update jquery-ui
若是不給出庫名,則更新全部庫。
bower uninstall命令用於卸載指定的庫。
$ bower uninstall jquery-ui
注意,默認狀況下會連所依賴的庫一塊兒卸載。好比,jquery-ui依賴jquery,卸載時會連jquery一塊兒卸載,除非還有別的庫依賴jquery。
bower list或bower ls命令,用於列出項目所使用的全部庫。
Bower list Bower ls
項目根目錄下(也能夠放在用戶的主目錄下)的.bowerrc文件是Bower的配置文件,它大概像下面這樣。
{ "directory" : "components", "json" : "bower.json", "endpoint" : "https://Bower.herokuapp.com", "searchpath" : "", "shorthand_resolver" : "" }
其中的屬性含義以下。