Bower 使用

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

項目根目錄下(也能夠放在用戶的主目錄下)的.bowerrc文件是Bower的配置文件,它大概像下面這樣。

{ "directory" : "components", "json" : "bower.json", "endpoint" : "https://Bower.herokuapp.com", "searchpath" : "", "shorthand_resolver" : "" }

其中的屬性含義以下。

  • directory:存放庫文件的子目錄名。
  • json:描述各個庫的json文件名。
  • endpoint:在線索引的網址,用來搜索各類庫。
  • searchpath:一個數組,儲存備選的在線索引網址。若是某個庫在endpoint中找不到,則繼續搜索該屬性指定的網址,一般用於放置某些不公開的庫。
  • shorthand_resolver:定義各個庫名稱簡寫形式。

相關連接

相關文章
相關標籤/搜索