[TOC] ## 概述 隨著網頁功能變得越來越復雜，同一張網頁加載多個JavaScript函數庫早已是家常便飯。開發者越來越需要一個工具，對瀏覽器端的各種庫進行管理，比如搜索、自動安裝\卸載、檢查更新、確保依賴關系等等。Bower就是為了解決這個問題而誕生的針對瀏覽器端的庫管理工具。 Bower基于node.js，所以安裝之前，必須先確保已安裝node.js。 ~~~ $ sudo npm install bower --global ~~~ 運行上面的命令以后，Bower就已經安裝在你的系統中了。運行幫助命令，查看Bower是否安裝成功。 ~~~ $ bower help ~~~ 下面的命令可以更新或卸載Bower。 ~~~ # 更新 $ sudo npm update -g bower # 卸載 $ sudo npm uninstall --global bower ~~~ ## 常用操作 ### 項目初始化 在項目根目錄下，運行下面的命令，進行初始化。 ~~~ $ bower init ~~~ 通過回答幾個問題，就會自動生成bower.json文件。這是項目的配置文件，下面是一個例子。 ~~~ { "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命令，一下子安裝所有庫。 ~~~ $ bower install ~~~ bower.json文件存放在庫的根目錄下，它的作用是（1）保存項目的庫信息，供項目安裝時使用，（2）向Bower.com提交你的庫，該網站會讀取bower.json，列入在線索引。 ~~~ $ 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：定義各個庫名稱簡寫形式。 ## 相關鏈接 * Cody Lindley,?[Package Managers: An Introductory Guide For The Uninitiated Front-End Developer](http://tech.pro/tutorial/1190/package-managers-an-introductory-guide-for-the-uninitiated-front-end-developer) * Tyson Cadenhead,?[Client-Side Dependency Management with Bower](http://tysoncadenhead.com/blog/client-side-dependency-management-with-bower) * Matt West,?[Getting Started with Bower](http://blog.teamtreehouse.com/getting-started-bower)