使用Bower進行前端依賴管理

什麼是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：

1	$ npm install -g bower

這行指令是Bower的全局安裝，-g 操作表示全局。

2 3	–version //檢查版本确認是否安裝好 update //更新Bower版本 uninstall --global 解除安裝Bower

如何使用Bower?

安裝完bower之後就可以使用所有的bower指令了。可以鍵入help 指令來檢視bower可以完成那些操作，如下：

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

PS D:\> help Usage:     bower <command> [<args>] [<options>] Commands:     cache                   Manage cache     help                    Display information about Bower     home                    Opens a package homepage into your favorite browser     info                    Info of particular     init                    Interactively create bower.json file     install                 Install locally     link                    Symlink folder     list                    List local packages - and possible updates     login                   Authenticate with GitHub store credentials     lookup                  Look up URL by name     prune                   Removes extraneous     register                Register     search                  Search for     update                  Update     uninstall               Remove     unregister              Remove from the registry     version                 Bump version Options:     -f, --force             Makes various commands more forceful     -j, --json              Output consumable JSON     -l, --loglevel          What level logs to report     -o, --offline           Do not hit network     -q, --quiet             Only output important     -s, --silent            Do anything, besides errors     -V, --verbose           verbose     --allow-root            Allows running as root     -v, --version           Output     --no-color              Disable colors See 'bower help <command>' on specific command.

上面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，首先使用指令行将找到包存放的本地目錄，然後執行：

jquery

安裝後的庫預設存放在項目的 bower_components 子目錄，如果要指定其他位置，可在 .bowerrc 檔案的 directory 屬性設定。

Bower使用包的名字去線上索引中搜尋該包的網址 — bower.com。某些情況下，如果一個庫很新（或者你不想使用預設網址），可能需要我們手動指定該庫的網址。指定的網址可以是 github 位址、http 網址、本地檔案。

git://github.com/documentcloud/backbone.git http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js ./some/path/relative/to/this/directory/backbone.js

預設情況下，會安裝該庫的最新版本，但是也可以手動指定版本号。

jquery-ui#1.10.1

如果某個庫依賴另一個庫，安裝時預設将所依賴的庫一起安裝。Bower會根據該庫的 bower.json 檔案下的 dependencies 配置自動給你安裝指定依賴庫的指定版本。比如，jquery-ui依賴jquery，安裝時會連jquery一起安裝。

包的搜尋

假如你想在你的應用程式中使用twitter的bootstrap架構，但你不确定包的名字，這時你可以使用search 指令：

search bootstrap Search results:     bootstrap git://github.com/twbs/bootstrap.git     angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git     bootstrap-sass-official git://github.com/twbs/bootstrap-sass.git     sass-bootstrap git://github.com/jlong/sass-bootstrap.git     bootstrap-datepicker git://github.com/eternicode/bootstrap-datepicker.git     bootstrap-select git://github.com/silviomoreto/bootstrap-select.git     angular-ui-bootstrap-bower git://github.com/angular-ui/bootstrap-bower     angular-ui-bootstrap git://github.com/angular-ui/bootstrap.git     bootstrap-daterangepicker git://github.com/dangrossman/bootstrap-daterangepicker.git     bootstrap-timepicker git://github.com/jdewit/bootstrap-timepicker     bootstrap-switch git://github.com/nostalgiaz/bootstrap-switch.git     bootstrap-css git://github.com/jozefizso/bower-bootstrap-css.git     select2-bootstrap-css git://github.com/t0m/select2-bootstrap-css.git     eonasdan-bootstrap-datetimepicker git://github.com/Eonasdan/bootstrap-datetimepicker.git     seiyria-bootstrap-slider git://github.com/seiyria/bootstrap-slider.git     angular-bootstrap-colorpicker git://github.com/buberdds/angular-bootstrap-colorpicker.git     bootstrap-multiselect git://github.com/davidstutz/bootstrap-multiselect.git     bootstrap.css git://github.com/bowerjs/bootstrap.git     bootstrap-datetimepicker git://github.com/tarruda/bootstrap-datetimepicker.git     angular-bootstrap-datetimepicker git://github.com/dalelotts/angular-bootstrap-datetimepicker     bootstrap-modal git://github.com/jschr/bootstrap-modal.git     bootstrap-tour git://github.com/sorich87/bootstrap-tour.git     bootstrap-tagsinput git://github.com/TimSchlechter/bootstrap-tagsinput.git     bootstrap-additions git://github.com/mgcrea/bootstrap-additions.git     bootstrap-file-input git://github.com/grevory/bootstrap-file-input.git     angular-bootstrap-switch git://github.com/frapontillo/angular-bootstrap-switch.git     bootstrap-social git://github.com/lipis/bootstrap-social.git     twbs-bootstrap-sass git://github.com/twbs/bootstrap-sass     ember-addons.bs_for_ember git://github.com/ember-addons/bootstrap-for-ember.git     jasny-bootstrap git://github.com/jasny/bootstrap.git

檢視包的資訊

如果你想看到關于特定的包的資訊，可以使用info 指令來檢視該包的所有資訊：

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

info bootstrap#*           not-cached git://github.com/twbs/bootstrap.git#* bootstrap#*              resolve git://github.com/twbs/bootstrap.git#* bootstrap#*             download https://github.com/twbs/bootstrap/archive/v3.3.6.tar.gz progress received 0.9MB of 3.8MB downloaded, 24% progress received 1.0MB of 3.8MB downloaded, 27% progress received 1.1MB of 3.8MB downloaded, 30% progress received 1.3MB of 3.8MB downloaded, 34% progress received 1.4MB of 3.8MB downloaded, 37% progress received 1.6MB of 3.8MB downloaded, 41% progress received 1.7MB of 3.8MB downloaded, 46% progress received 1.9MB of 3.8MB downloaded, 50% progress received 2.1MB of 3.8MB downloaded, 55% progress received 2.3MB of 3.8MB downloaded, 59% progress received 2.4MB of 3.8MB downloaded, 64% progress received 2.6MB of 3.8MB downloaded, 69% progress received 2.8MB of 3.8MB downloaded, 74% progress received 3.0MB of 3.8MB downloaded, 79% progress received 3.2MB of 3.8MB downloaded, 85% progress received 3.4MB of 3.8MB downloaded, 88% progress received 3.5MB of 3.8MB downloaded, 92% progress received 3.7MB of 3.8MB downloaded, 96% bootstrap#*              extract archive.tar.gz 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' } Available versions:   - 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 additional prereleases ‘bower --verbose’ You can request 'bower info bootstrap#<version>'

檢視指定版本包的資訊：

bootstrap#3.3.6 bootstrap#3.3.6           cached git://github.com/twbs/bootstrap.git#3.3.6 bootstrap#3.3.6         validate 3.3.6 against git://github.com/twbs/bootstrap.git#3.3.6

已安裝包清單

list check-new     Checking new versions project dependencies... 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檔案，它會自動提示你輸入一系列的内容，以生成最終的檔案，包括項目名稱、作者資訊、項目描述資訊、關鍵詞、開源證書等等。

init ? newone description one main newone.js what types modules does this expose? es6 keywords test authors biaodianfu <biaodianfu#gmail.com> license MIT http://www.biaodianfu.com set currently installed components dependencies? Yes add commonly ignored files ignore list? would you like mark private which prevents it being accidentally published registry? No 'newone',   authors:     'biaodianfu <biaodianfu#gmail.com>' 'a new one project', 'newone.js',     'es6'     'test' 'http://www.biaodianfu.com',     '**/.*',     'node_modules',     'bower_components',     'test',     'tests' '^2.2.0'   }

注意看，它已經加入了jQuery依賴關系。現在假設也想用twitter bootstrap，我們可以用下面的指令安裝twitter bootstrap并更新bower.json檔案：

--save

-save 就是把下載下傳的包資訊寫入到配置檔案的依賴項裡，它會自動安裝最新版本的bootstrap并更新bower.json檔案：

"name": "newone",   "authors":     "biaodianfu <[email protected]>"   "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，分别代表生産環境和開發環境中的依賴包，它們可以分别通過下面兩個指令自動添加：

--save         //添加到dependencies angular --save-dev        //添加到devDependencies

按照上面的做法，例如，我建立了一個前端開發的較為齊全的包，就可以挂在git或者bower的官網上了。而你要做的是，隻把這個bower.jsonpush到線上即可。别人通過下載下傳這個bower.json檔案，在已經安裝bower的前提下，直接運作bower install就可以使用這個前端開發包了。

将包釋出到bower.com

你可以注冊自己的包，這樣其他人也可以使用了，這個操作隻是在伺服器上儲存了一個映射，伺服器本身不托管代碼。

送出你的 bower 包給 bower.com：

register <my-package-name> <git-endpoint>

執行個體：在 bower.com 登記jquery

git://github.com/jquery/jquery

注意，如果你的庫與現有的庫重名，就會送出失敗。