什么是Bower？
前端開發圈越來越熱鬧，第三方js庫層出不窮，版本更迭日新月異；且許多庫又對其他庫有着依賴關系。而我們的頁面需要的庫也越來越多樣化。以往需要引入第三方庫，需要搜索尋找所需庫的特定版本下載，還需要搜索尋找下載特定版本的依賴庫，十分麻煩；庫的更新也是件十分繁瑣的事情。是否有一個工具：搜索、自動安裝/卸載、檢查更新、確保依賴關系……
Bower 是 twitter 推出的一款包管理工具，基於nodejs的模塊化思想，把功能分散到各個模塊中，讓模塊和模塊之間存在聯系，通過 Bower 來管理模塊間的這種聯系。
- “包”是指一系列有意義的資源的集合，在bower這里，更多體現在json文件，它是這些資源的配置文件，一個完整的包都應該有一個bower.json文件。
- “管理”包含獲取，下載，安裝，更新，查找,注冊等等一系列對資源的操作。
npm是專門管理node模塊的管理工具，而bower是node的模塊，因為bower是依賴node，npm和git。正如前面所言，npm是擅長的是管理node模塊，而bower管理的范圍更大，涉及html,css,js和圖片等媒體資源。或許，這也是人們喜歡在服務器端使用npm,而在客戶端使用bower。
Bower 的基礎功能有哪些？
- 注冊模塊：每個包需要確定一個唯一的 ID 使得搜索和下載的時候能夠正確匹配
- 文件存儲：把文件存儲在一個有效的網絡地址上,使用的時候可以直接下載到
- 上傳下載：你可以把你的包注冊后上傳存儲，使用的時候可以使用一條命令直接下載到當前項目
- 依賴分析：它幫我們解決了包與包直接的依賴關系，當我們下載一個包A的時候,由於它依賴包B,所以bower會自動幫我們下載好包B
為什么要使用Bower?
- 節省時間。為什么要學習Bower的第一個原因，就是它會為你節省尋找客戶端的依賴關系的時間。每次我需要安裝jQuery的時候，我都需要去jQuery網站下載包或使用CDN版本。但是有了Bower，你只需要輸入一個命令，jquery就會安裝在本地計算機上，你不需要去記版本號之類的東西，你也可以通過Bower的info命令去查看任意庫的信息。
- 脫機工作。Bower會在用戶主目錄下創建一個.bower的文件夾，這個文件夾會下載所有的資源、並安裝一個軟件包使它們可以離線使用。如果你熟悉Java，Bower即是一個類似於現在流行的Maven構建系統的.m2倉庫。每次你下載任何資源庫都將被安裝在兩個文件夾中 —— 一個在的應用程序文件夾，另一個在用戶主目錄下的.bower文件夾。因此，下一次你需要這個倉庫時，就會用那個用戶主目錄下.bower中的版本。
- 可以很容易地展現客戶端的依賴關系。你可以創建一個名為json的文件，在這個文件里你可以指定所有客戶端的依賴關系，任何時候你需要弄清楚你正在使用哪些庫，你可以參考這個文件。
- 讓升級變得簡單。假設某個庫的新版本發布了一個重要的安全修補程序，為了安裝新版本，你只需要運行一個命令，bower會自動更新所有有關新版本的依賴關系。
如何安裝Bower?
Bower依賴於Node.js，Git（資源主要通過git進行下載），因此你需要提前安裝好，才能正常安裝bower。 Bower可以通過NPM進行安裝：
一旦你已經安裝了上面所說的所有必要文件，鍵入以下命令安裝Bower：
$ npminstall -g bower
這行命令是Bower的全局安裝，-g 操作表示全局。
$ bower –version //檢查版本確認是否安裝好 $ npmupdate -g bower //更新Bower版本 $ npmuninstall --global bower 卸載Bower
如何使用Bower?
安裝完bower之后就可以使用所有的bower命令了。可以鍵入help 命令來查看bower可以完成那些操作，如下：
PS D:\> bowerhelp Usage: bower <command> [<args>] [<options>] Commands: cache Managebowercache help DisplayhelpinformationaboutBower home Opens a package homepageintoyourfavoritebrowser info Infoof a particularpackage init Interactivelycreate a bower.jsonfile install Install a package locally link Symlink a package folder list Listlocalpackages - and possibleupdates login AuthenticatewithGitHuband storecredentials lookup Lookup a package URLbyname prune Removeslocalextraneouspackages register Register a package search Searchfor a package byname update Update a localpackage uninstall Remove a localpackage unregister Remove a package fromtheregistry version Bump a package version Options: -f, --force Makesvariouscommandsmoreforceful -j, --json OutputconsumableJSON -l, --loglevel Whatleveloflogsto report -o, --offline Do not hitthenetwork -q, --quiet Onlyoutputimportantinformation -s, --silent Do not outputanything, besideserrors -V, --verbose Makesoutputmoreverbose --allow-root Allowsrunningcommandsas root -v, --version OutputBowerversion --no-color Disablecolors See 'bower help <command>' for moreinformationon a specificcommand.
上面help 信息列出 bower 提供的命令：
- cache:bower緩存管理
- help:顯示Bower命令的幫助信息
- home:通過瀏覽器打開一個包的github發布頁
- info:查看包的信息
- init:創建json文件
- install:安裝包到項目
- link:在本地bower庫建立一個項目鏈接
- list:列出項目已安裝的包
- lookup:根據包名查詢包的URL
- prune:刪除項目無關的包
- register:注冊一個包
- search:搜索包
- update:更新項目的包
- uninstall:刪除項目的包
包的安裝
Bower是一個軟件包管理器，舉例來看一下來如何使用Bower安裝JQuery，首先使用命令行將找到包存放的本地目錄，然后執行：
bowerinstalljquery
安裝后的庫默認存放在項目的 bower_components 子目錄，如果要指定其他位置，可在 .bowerrc 文件的 directory 屬性設置。
Bower使用包的名字去在線索引中搜索該包的網址 — bower.com。某些情況下，如果一個庫很新（或者你不想使用默認網址），可能需要我們手動指定該庫的網址。指定的網址可以是 github 地址、http 網址、本地文件。
bowerinstallgit://github.com/documentcloud/backbone.git bowerinstallhttp://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js bowerinstall ./some/path/relative/to/this/directory/backbone.js
默認情況下，會安裝該庫的最新版本，但是也可以手動指定版本號。
bowerinstalljquery-ui#1.10.1
如果某個庫依賴另一個庫，安裝時默認將所依賴的庫一起安裝。Bower會根據該庫的 bower.json 文件下的 dependencies 配置自動給你安裝指定依賴庫的指定版本。比如，jquery-ui依賴jquery，安裝時會連jquery一起安裝。
包的搜索
假如你想在你的應用程序中使用twitter的bootstrap框架，但你不確定包的名字，這時你可以使用search 命令：
PS D:\> bowersearchbootstrap Searchresults: bootstrapgit://github.com/twbs/bootstrap.git angular-bootstrapgit://github.com/angular-ui/bootstrap-bower.git bootstrap-sass-officialgit://github.com/twbs/bootstrap-sass.git sass-bootstrapgit://github.com/jlong/sass-bootstrap.git bootstrap-datepickergit://github.com/eternicode/bootstrap-datepicker.git bootstrap-selectgit://github.com/silviomoreto/bootstrap-select.git angular-ui-bootstrap-bowergit://github.com/angular-ui/bootstrap-bower angular-ui-bootstrapgit://github.com/angular-ui/bootstrap.git bootstrap-daterangepickergit://github.com/dangrossman/bootstrap-daterangepicker.git bootstrap-timepickergit://github.com/jdewit/bootstrap-timepicker bootstrap-switch git://github.com/nostalgiaz/bootstrap-switch.git bootstrap-cssgit://github.com/jozefizso/bower-bootstrap-css.git select2-bootstrap-cssgit://github.com/t0m/select2-bootstrap-css.git eonasdan-bootstrap-datetimepickergit://github.com/Eonasdan/bootstrap-datetimepicker.git seiyria-bootstrap-slidergit://github.com/seiyria/bootstrap-slider.git angular-bootstrap-colorpickergit://github.com/buberdds/angular-bootstrap-colorpicker.git bootstrap-multiselectgit://github.com/davidstutz/bootstrap-multiselect.git bootstrap.cssgit://github.com/bowerjs/bootstrap.git bootstrap-datetimepickergit://github.com/tarruda/bootstrap-datetimepicker.git angular-bootstrap-datetimepickergit://github.com/dalelotts/angular-bootstrap-datetimepicker bootstrap-modalgit://github.com/jschr/bootstrap-modal.git bootstrap-tourgit://github.com/sorich87/bootstrap-tour.git bootstrap-tagsinputgit://github.com/TimSchlechter/bootstrap-tagsinput.git bootstrap-additionsgit://github.com/mgcrea/bootstrap-additions.git bootstrap-file-inputgit://github.com/grevory/bootstrap-file-input.git angular-bootstrap-switch git://github.com/frapontillo/angular-bootstrap-switch.git bootstrap-socialgit://github.com/lipis/bootstrap-social.git twbs-bootstrap-sassgit://github.com/twbs/bootstrap-sass ember-addons.bs_for_embergit://github.com/ember-addons/bootstrap-for-ember.git jasny-bootstrapgit://github.com/jasny/bootstrap.git
查看包的信息
如果你想看到關於特定的包的信息，可以使用info 命令來查看該包的所有信息：
PS D:\> bowerinfobootstrap bowerbootstrap#* not-cached git://github.com/twbs/bootstrap.git#* bowerbootstrap#* resolve git://github.com/twbs/bootstrap.git#* bowerbootstrap#* download https://github.com/twbs/bootstrap/archive/v3.3.6.tar.gz bowerbootstrap#* progress received 0.9MB of 3.8MB downloaded, 24% bowerbootstrap#* progress received 1.0MB of 3.8MB downloaded, 27% bowerbootstrap#* progress received 1.1MB of 3.8MB downloaded, 30% bowerbootstrap#* progress received 1.3MB of 3.8MB downloaded, 34% bowerbootstrap#* progress received 1.4MB of 3.8MB downloaded, 37% bowerbootstrap#* progress received 1.6MB of 3.8MB downloaded, 41% bowerbootstrap#* progress received 1.7MB of 3.8MB downloaded, 46% bowerbootstrap#* progress received 1.9MB of 3.8MB downloaded, 50% bowerbootstrap#* progress received 2.1MB of 3.8MB downloaded, 55% bowerbootstrap#* progress received 2.3MB of 3.8MB downloaded, 59% bowerbootstrap#* progress received 2.4MB of 3.8MB downloaded, 64% bowerbootstrap#* progress received 2.6MB of 3.8MB downloaded, 69% bowerbootstrap#* progress received 2.8MB of 3.8MB downloaded, 74% bowerbootstrap#* progress received 3.0MB of 3.8MB downloaded, 79% bowerbootstrap#* progress received 3.2MB of 3.8MB downloaded, 85% bowerbootstrap#* progress received 3.4MB of 3.8MB downloaded, 88% bowerbootstrap#* progress received 3.5MB of 3.8MB downloaded, 92% bowerbootstrap#* progress received 3.7MB of 3.8MB downloaded, 96% bowerbootstrap#* extract archive.tar.gz bowerbootstrap#* resolved git://github.com/twbs/bootstrap.git#3.3.6 { name: 'bootstrap', description: 'The most popular front-end framework for developing responsive, mobile first projects on the web.', keywords: [ 'css', 'js', 'less', 'mobile-first', 'responsive', 'front-end', 'framework', 'web' ], homepage: 'http://getbootstrap.com', license: 'MIT', moduleType: 'globals', main: [ 'less/bootstrap.less', 'dist/js/bootstrap.js' ], ignore: [ '/.*', '_config.yml', 'CNAME', 'composer.json', 'CONTRIBUTING.md', 'docs', 'js/tests', 'test-infra' ], dependencies: { jquery: '1.9.1 - 2' }, version: '3.3.6' } Availableversions: - 3.3.6 - 3.3.5 - 3.3.4 - 3.3.2 - 3.3.1 - 3.3.0 - 3.2.0 - 3.1.1 - 3.1.0 - 3.0.3 - 3.0.2 - 3.0.1 - 3.0.0 - 2.3.2 - 2.3.1 - 2.3.0 - 2.2.2 - 2.2.1 - 2.2.0 - 2.1.1 - 2.1.0 - 2.0.4 - 2.0.3 - 2.0.2 - 2.0.1 - 2.0.0 - 1.4.0 - 1.3.0 - 1.2.0 - 1.1.1 - 1.1.0 - 1.0.0 Show 4 additionalprereleaseswith ‘bowerinfobootstrap --verbose’ Youcanrequestinfofor a specificversionwith 'bower info bootstrap#<version>'
查看指定版本包的信息：
PS D:\> bowerinfobootstrap#3.3.6 bowerbootstrap#3.3.6 cached git://github.com/twbs/bootstrap.git#3.3.6 bowerbootstrap#3.3.6 validate 3.3.6 against git://github.com/twbs/bootstrap.git#3.3.6 { name: 'bootstrap', description: 'The most popular front-end framework for developing responsive, mobile first projects on the web.', keywords: [ 'css', 'js', 'less', 'mobile-first', 'responsive', 'front-end', 'framework', 'web' ], homepage: 'http://getbootstrap.com', license: 'MIT', moduleType: 'globals', main: [ 'less/bootstrap.less', 'dist/js/bootstrap.js' ], ignore: [ '/.*', '_config.yml', 'CNAME', 'composer.json', 'CONTRIBUTING.md', 'docs', 'js/tests', 'test-infra' ], dependencies: { jquery: '1.9.1 - 2' }, version: '3.3.6' } 已安裝包列表 PS D:\> bowerlist bowercheck-new Checkingfor new versionsoftheprojectdependencies... root D:\ └── jquery#2.2.0 extraneous (latest is 3.0.0-beta1)
其他常用指令
- 包的升級 bower update jquery
- 包的卸載 bower uninstall jquery （注意：默認情況下會連所依賴的庫一起卸載。比如，jquery-ui 依賴 jquery，卸載時會連 jquery 一起卸載，除非還有別的庫依賴 jquery。）
- 安裝失敗清除緩存 bower cache clean
Bower的配置文件.bowerrc
項目根目錄下（也可以放在用戶的主目錄下，這樣就不用每次都配置）的 .bowerrc 文件是 Bower 的配置文件，它大概像下面這樣。
{ "directory" : "components", "json" : "bower.json", "endpoint" : "https://Bower.herokuapp.com", "searchpath" : "", "shorthand_resolver" : "" }
其中的屬性含義如下。
- directory：存放庫文件的子目錄名。
- json：描述各個庫的json文件名。
- endpoint：在線索引的網址，用來搜索各種庫。
- searchpath：一個數組，儲存備選的在線索引網址。如果某個庫在endpoint中找不到，則繼續搜索該屬性指定的網址，通常用於放置某些不公開的庫。
- shorthand_resolver：定義各個庫名稱簡寫形式。
bower.json文件
bower.json文件的使用可以讓包的安裝更容易，你可以在應用程序的根目錄下創建一個名為“bower.json”的文件，並定義它的依賴關系。bower.json的作用是：
- 保存項目的庫信息，供項目二次安裝時使用（重復使用）
- 向com 提交你的庫時，該網站會讀取 bower.json，列入在線索引。
其中dependencies 記錄着生產環境依賴的庫；devDependencies 記錄着開發時依賴的 node package。其版本規則見 npm 的version rules。
使用bower init 命令可以來創建bower.json文件，它會自動提示你輸入一系列的內容，以生成最終的文件，包括項目名稱、作者信息、項目描述信息、關鍵詞、開源證書等等。
PS D:\> bowerinit ? namenewone ? description a new oneproject ? mainfilenewone.js ? whattypesofmodulesdoesthis package expose? es6 ? keywordstest ? authorsbiaodianfu <biaodianfu#gmail.com> ? licenseMIT ? homepagehttp://www.biaodianfu.com ? set currently installed components as dependencies? Yes ? add commonly ignored files to ignore list? Yes ? would you like to mark this package as private which prevents it from being accidentally published to the registry? No { name: 'newone', authors: [ 'biaodianfu <biaodianfu#gmail.com>' ], description: 'a new one project', main: 'newone.js', moduleType: [ 'es6' ], keywords: [ 'test' ], license: 'MIT', homepage: 'http://www.biaodianfu.com', ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ], dependencies: { jquery: '^2.2.0' } }
注意看，它已經加入了jQuery依賴關系。現在假設也想用twitter bootstrap，我們可以用下面的命令安裝twitter bootstrap並更新bower.json文件：
$ bowerinstallbootstrap --save
-save 就是把下載的包信息寫入到配置文件的依賴項里，它會自動安裝最新版本的bootstrap並更新bower.json文件：
{ "name": "newone", "authors": [ "biaodianfu <biaodianfu@gmail.com>" ], "description": "a new one project", "main": "newone.js", "moduleType": [ "es6" ], "keywords": [ "test" ], "license": "MIT", "homepage": "http://www.biaodianfu.com", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "jquery": "^2.2.0", "bootstrap": "^3.3.6" } }
需要注意的是，這里有兩個版本的依賴，一個是dependencies，另一個是devDependencies，分別代表生產環境和開發環境中的依賴包，它們可以分別通過下面兩個指令自動添加：
bowerinstalljquery --save //添加到dependencies bowerinstallangular --save-dev //添加到devDependencies
按照上面的做法，例如，我創建了一個前端開發的較為齊全的包，就可以掛在git或者bower的官網上了。而你要做的是，只把這個bower.jsonpush到線上即可。別人通過下載這個bower.json文件，在已經安裝bower的前提下，直接運行bower install就可以使用這個前端開發包了。
將包發布到bower.com
你可以注冊自己的包，這樣其他人也可以使用了，這個操作只是在服務器上保存了一個映射，服務器本身不托管代碼。
提交你的 bower 包給 bower.com：
bowerregister <my-package-name> <git-endpoint>
實例：在 bower.com 登記jquery
bowerregisterjquerygit://github.com/jquery/jquery
注意，如果你的庫與現有的庫重名，就會提交失敗。