本文主要介紹前端開(kāi)發(fā)中常用的包管理工具Bower，具體包括Bower的基本情況、安裝、使用和常見(jiàn)命令等內(nèi)容，最后還介紹了依賴樹(shù)管理的常見(jiàn)方式以及Bower采用的策略并進(jìn)行了比較。
1.1 關(guān)于Bower
Bower是一款優(yōu)秀的包管理器，它由Twitter公司開(kāi)發(fā)，支持以命令行的方式來(lái)對(duì)包進(jìn)行搜索、下載、更新和卸載。
模塊或組件指獨(dú)立完整的模塊，可以是應(yīng)用的一部分或者是擴(kuò)展，依賴可以是jQuery或backbone這樣的庫(kù)，也可以像Bootstrap這樣的UI框架或者是UI組件。
包英文（package）模塊或組件的另一種叫法。
依賴一個(gè)模塊為了滿足獨(dú)立完整原則所必須的其他模塊，依賴提供了這個(gè)模塊所需要的功能，如果沒(méi)有這個(gè)功能，那么這個(gè)組件就無(wú)法工作。例如我們認(rèn)為jQuery-ui這個(gè)組件依賴于jQuery。
Bower的優(yōu)點(diǎn)
? 專為前端開(kāi)發(fā)設(shè)計(jì)，幾乎所有的主流前端庫(kù)都可以使用該工具。
? 約束松散，使用簡(jiǎn)單。
? 依賴樹(shù)扁平更適合Web應(yīng)用開(kāi)發(fā)。
官網(wǎng)參考：https://bower.io/
1.2 Bower的安裝
在安裝bower之前，必須確認(rèn)你已經(jīng)安裝了Node.js和Git。
安裝Bower
使用npm來(lái)安裝Bower，-g表示全局安裝
$ npm install -g bower
查看Bower版本
Bower安裝完成后就能在命令行中直接使用bower命令了，可以通過(guò)下面的命令行來(lái)查看當(dāng)前的版本。
$ bower -v 或者是$ bower -version
查看幫助信息
使用help命令來(lái)查看幫助信息。
$ bower -help
Usage:
bower <command> [<args>] [<options>]
Commands:
cache Manage bower cache(管理緩存信息)
help Display help information about Bower（顯示關(guān)于Bower的幫助信息）
home Opens a package homepage into your favorite browser
info Info of a particular package(顯示特定包的詳細(xì)信息)
init Interactively create a bower.json file（交互式創(chuàng)建bower.json文件）
install Install a package locally（安裝包到本地）
link Symlink a package folder(在本地bower庫(kù)建立一個(gè)項(xiàng)目鏈接）
list List local packages - and possible updates（列出本地包以及可能的更新）
login Authenticate with GitHub and store credentials（Github身份認(rèn)證）
lookup Look up a single package URL by name（根據(jù)包名查詢包的URL）
prune Removes local extraneous packages（刪除項(xiàng)目沒(méi)有用到的包）
register Register a package（注冊(cè)一個(gè)包）
search Search for packages by name（通過(guò)名稱來(lái)搜索包）
update Update a local package（更新項(xiàng)目的包）
uninstall Remove a local package（移除項(xiàng)目的包）
unregister Remove a package from the registry（注銷(xiāo)包）
version Bump a package version（列出版本信息）
Options:...
1.3 Bower的使用
初始化操作
在桌面創(chuàng)建新的文件夾，用來(lái)演示Bower的使用。先使用命令行進(jìn)入到文件夾路徑，然后使用下面的命令來(lái)對(duì)Bower進(jìn)行初始化操作。
$ bower init
根據(jù)提示來(lái)交互式的設(shè)置基本項(xiàng)，初始化操作完成之后，會(huì)在文件夾的根目錄中創(chuàng)建一個(gè)bower.json文件，里面包含一些基本信息。
{
"name": "bowerDemo",
"authors": [
"wendingding"
],
"description": "Nothing",
"main": "",
"license": "MIT",
"homepage": "wendingding.com",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
安裝指定的包
嘗試執(zhí)行下面的命令行，來(lái)把jQuery框架安裝到當(dāng)前項(xiàng)目中。
$ bower install --save jquery
命令行中的save參數(shù)會(huì)把包記錄保存到bower.json文件中，install命令會(huì)把jQuery框架下載到bower_components目錄中，該目錄文件是保存所有組件和依賴的地方。當(dāng)執(zhí)行install命令的時(shí)候，Bower會(huì)從倉(cāng)庫(kù)中獲取到j(luò)Query組件的信息然后和bower.json文件中的信息進(jìn)行比較，如果jQuery沒(méi)有安裝，那么就會(huì)默認(rèn)安裝最新版本，如果已經(jīng)安裝了，則bower會(huì)自動(dòng)停止并提示。
具體的執(zhí)行情況如下：
bogon:Demo wendingding$ bower install --save jquery
bower invalid-meta for:/Users/文頂頂/Desktop/Demo/bower.json
bower invalid-meta The "name" is recommended to be lowercase, can contain digits, dots
bower cached https://github.com/jquery/jquery-dist.git#3.3.1
bower validate 3.3.1 against https://github.com/jquery/jquery-dist.git#*
bower install jquery#3.3.1
jquery#3.3.1 bower_components/jquery
命令執(zhí)行完畢后，Bower會(huì)在根目錄下生成bower_components文件夾，并把下載好的包（jQuery框架）放在這個(gè)文件夾里面。此時(shí)目錄結(jié)構(gòu)如下：
.
├── bower.json
└── bower_components
└── jquery
├── AUTHORS.txt
├── LICENSE.txt
├── README.md
├── bower.json
├── dist
├── external
└── src
查看bower.json文件會(huì)發(fā)現(xiàn)，此時(shí)更新了包和對(duì)應(yīng)的版本信息
"dependencies": {
"jquery": "^3.3.1"
}
Bower在執(zhí)行安裝操作的時(shí)候，主要做了如下操作：
① ?檢查項(xiàng)目目錄中的bower.json文件，以確定包是否已經(jīng)安裝了。
② ?如果指定的包沒(méi)有安裝，那么Bower就會(huì)檢查Bower倉(cāng)庫(kù)中是否存在名稱對(duì)應(yīng)的包
③ ?如果Bower倉(cāng)庫(kù)中存在指定的包，那么就下載最新版本到本地
④ ?把下載好的包的文件添加到項(xiàng)目目錄中，并且更新bower.json文件(包名和版本)
1.4 Bower的常見(jiàn)命令
安裝指定包
$ bower install # 通過(guò) bower.json 文件安裝
$ bower install jquery # 通過(guò)在github上注冊(cè)的包名安裝
$ bower install desandro/masonry # GitHub短鏈接
$ bower install http://example.com/x.js # URL路徑
$ bower install git://github.com/user/package.git #Github上的 .git
想要下載安裝的包可以是GitHub上的短鏈接、.git 、一個(gè)URL路徑等。
搜索指定的包
$ bower search jquery
如果我們?cè)谑褂每蚣芑蛘呤强蚣懿寮臅r(shí)候，記不住或者是不確定包的名字，則可以嘗試先通過(guò)關(guān)鍵字搜索，bower會(huì)列出包含關(guān)鍵字的所有可用包。
安裝包的指定版本
$ bower install --save jquery#1.8.0
Bower通過(guò)#號(hào)來(lái)確定需要下載的版本，如果沒(méi)有指定版本，則Bower自動(dòng)幫我們下載最新的。所以，如果需要下載特定版本的包，可以在安裝命令中使用#號(hào)來(lái)聲明。
如果要安裝指定的版本，也可以先在bower.json文件中對(duì)dependencies選項(xiàng)進(jìn)行配置，然后執(zhí)行$ bower install或者是$ bower update命令。
查看已安裝的包
$ bower list
$ bower list --paths
具體的執(zhí)行情況如下
wendingding$ bower list
bower check-new Checking for new versions of the project dependencies...
demo /Users/文頂頂/Desktop/Test
├── jquery#3.3.1
└─┬ jquery-ui#1.12.1
└── jquery#3.3.1
wendingding$ bower list --paths
jquery: bower_components/jquery/dist/jquery.js
jquery-ui': bower_components/jquery-ui/jquery-ui.js
list命令可以查看項(xiàng)目中當(dāng)前下載過(guò)的包，并提供最新版本號(hào)。
paths命令可以查看當(dāng)前下載過(guò)的所有包在項(xiàng)目中的對(duì)應(yīng)路徑，在其它工具中需要聲明/配置前端依賴包地址的時(shí)候該命令可能會(huì)比較有用。
卸載指定的包
$ bower uninstall jquery
卸載本地項(xiàng)目中已經(jīng)安裝的jQuery框架。
更新指定的包
$ bower update jquery
更新包的過(guò)程和安裝包的過(guò)程差不多，區(qū)別在于更新的時(shí)候會(huì)使用新文件替換舊文件，上面的命令強(qiáng)制安裝最新版本的jQuery框架。
查看指定包的詳細(xì)信息
$ bower info jquery
通過(guò)info指令可以查看指定包的詳情，還指令會(huì)列出對(duì)應(yīng)的git倉(cāng)庫(kù)地址，以及所有可用的版本。
1.5 Bower安裝有依賴的包
通常當(dāng)我們使用Bower命令(bower install --save xxx)來(lái)安裝指定包的時(shí)候，Bower會(huì)查找包對(duì)應(yīng)的git倉(cāng)庫(kù)地址然后下載到本地并在bower.json文件中記錄版本等信息。但有的包在使用的時(shí)候可能存在依賴關(guān)系，比如ember這個(gè)包需要依賴于jQuery框架。
使用Bower安裝有依賴包的兩種方式
? 先安裝該包的依賴項(xiàng)（這里為jQuery），再安裝指定的包（這里為ember）
? 直接安裝（這里為ember）
方式 ①
先安裝依賴,再安裝指定包
$ bower install --save jquery
$ bower install --save ember
$ bower list
Test /Users/文頂頂/Desktop/Test
├─┬ ember#2.18.2 (latest is 3.0.0-beta.2)
│ └── jquery#3.3.1
└── jquery#3.3.1
方式 ②
直接安裝指定包,會(huì)自動(dòng)安裝依賴(推薦)
$ bower install --save ember
bower invalid-meta for:/Users/文頂頂i/Desktop/Test/bower.json
bower cached https://github.com/components/ember.git#2.18.2
bower validate 2.18.2 against https://github.com/components/ember.git#*
bower cached https://github.com/jquery/jquery-dist.git#3.3.1
bower validate 3.3.1 against https://github.com/jquery/jquery-dist.git#>=1.7.0<4.0.0
bower install ember#2.18.2
bower install jquery#3.3.1
ember#2.18.2 bower_components/ember
└── jquery#3.3.1
jquery#3.3.1 bower_components/jquery`
列出項(xiàng)目中已經(jīng)安裝的所有包和依賴關(guān)系
$ bower list
......
Test /Users/文頂頂/Desktop/Test
└─┬ ember#2.18.2 (latest is 3.0.0-beta.2)
└── jquery#3.3.1
該命令行在安裝ember包的時(shí)候，發(fā)現(xiàn)需要依賴于jQuery框架，就會(huì)自動(dòng)下載對(duì)應(yīng)版本的jQuery框架并安裝到本地項(xiàng)目中。
1.6 依賴樹(shù)管理
組件(包)并非總是相互獨(dú)立的，有些組件(包)在使用的時(shí)候需要依賴于另外一些組件(包)，就像上文提到的ember需要依賴于jQuery，jQuery-ui需要依賴于jQuery一樣，我們嘗試使用下面的圖示來(lái)描述這種關(guān)系。
上面的圖示揭示了包（組件）與包（組件）之間的依賴關(guān)系，非常簡(jiǎn)單容易理解。在實(shí)際中，每個(gè)組件可能都有多個(gè)依賴，而這些依賴自己可能還有別的依賴，或者多個(gè)不同組件都依賴于某個(gè)指定的組件，因此在處理的時(shí)候可能會(huì)非常復(fù)雜。為了理清楚這復(fù)雜的關(guān)系，依賴管理工具會(huì)把所有的依賴構(gòu)成一顆Dependency Tree（依賴樹(shù)）。
依賴樹(shù)主要有三種
? 嵌套依賴樹(shù)
? 扁平依賴樹(shù)
? 混合依賴樹(shù)
注意：在構(gòu)造依賴樹(shù)的時(shí)候，組件（包）必須要有唯一的標(biāo)識(shí)，該標(biāo)識(shí)由組件的名稱和版本號(hào)構(gòu)成，也就是說(shuō)jQuery1.7.3和jQuery3.3.1是兩個(gè)不同的組件。
嵌套依賴樹(shù)
基本理念：每個(gè)組件各自都有自己的依賴，而不會(huì)共用一個(gè)依賴。
主要問(wèn)題：項(xiàng)目中會(huì)產(chǎn)生同一組件的多個(gè)副本，且可能有多個(gè)版本的組件共存比較混亂。
扁平依賴樹(shù)
基本理念：保證每個(gè)組件在項(xiàng)目只有一個(gè)版本，沒(méi)有任何其它的副本。
主要問(wèn)題：容易產(chǎn)生沖突，如果兩個(gè)組件需要同一個(gè)依賴的不同版本，就會(huì)導(dǎo)致出錯(cuò)，必須要用戶自己來(lái)解決沖突，決定具體使用哪個(gè)依賴并解決潛在的不一致性。
混合依賴樹(shù)
基本理念：使用最高效的辦法來(lái)管理一個(gè)組件的不同版本。
主要特點(diǎn)：混合依賴樹(shù)是扁平依賴樹(shù)和嵌套依賴樹(shù)的折中方案，如果一個(gè)組件的依賴已經(jīng)安裝了，而且版本也兼容，那么就不必再次下載安裝，只要指向已安裝的那個(gè)組件即可，如果版本不兼容的話，則下載安裝并版本兼容的組件。
1.7 Bower依賴樹(shù)管理和沖突處理
Bower作為專為前端開(kāi)發(fā)者設(shè)計(jì)的依賴管理工具，是完全基于扁平依賴樹(shù)的。上文介紹了扁平依賴樹(shù)在處理的時(shí)候要求保證每個(gè)組件在項(xiàng)目只有一個(gè)版本，沒(méi)有任何其它的副本，優(yōu)缺參半。那既然如此，Bower為什么不使用更高效的混合依賴樹(shù)？
Bower采用扁平依賴樹(shù)管理的原因
（1）代碼體積對(duì)于前端開(kāi)發(fā)非常重要，而扁平樹(shù)管理可以實(shí)現(xiàn)組件最(少)小化。
（2）所有組件默認(rèn)都在瀏覽器的全局作用域中運(yùn)行，不同版本的同名組件會(huì)產(chǎn)生沖突。
因?yàn)锽ower采用了扁平依賴樹(shù)的方式來(lái)處理，所以在使用的時(shí)候容易產(chǎn)生沖突，這種依賴管理方式要求開(kāi)發(fā)者注重組件的版本兼容和依賴關(guān)系。接下來(lái)，我們簡(jiǎn)單演示Bower使用過(guò)程中會(huì)出現(xiàn)沖突的情況。
沖突的產(chǎn)生和處理
① 安裝jQuery框架的1.2.3版本
$ bower install --save jquery#1.2.3
執(zhí)行情況
bower invalid-meta for:/Users/文頂頂/Desktop/Test/bower.json
bower invalid-meta The "name" is recommended to be lowercase, can contain...
bower not-cached https://github.com/jquery/jquery-dist.git#1.2.3
bower resolve https://github.com/jquery/jquery-dist.git#1.2.3
bower download https://github.com/jquery/jquery-dist/archive/1.2.3.tar.gz
bower extract jquery#1.2.3 archive.tar.gz
bower deprecated Package jquery is using the deprecated component.json
bower resolved https://github.com/jquery/jquery-dist.git#1.2.3
bower install jquery#1.2.3
② 安裝ember組件并解決沖突
$ bower install --save ember
具體的執(zhí)行情況
bogon:Test wendingding$ bower install --save ember
bower invalid-meta for:/Users/文頂頂/Desktop/Test/bower.json
bower invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes
bower cached https://github.com/components/ember.git#2.18.2
bower validate 2.18.2 against https://github.com/components/ember.git#*
bower cached https://github.com/jquery/jquery-dist.git#3.3.1
bower validate 3.3.1 against https://github.com/jquery/jquery-dist.git#>= 1.7.0 < 4.0.0
Unable to find a suitable version for jquery, please choose one by typing one of the numbers below:
1) jquery#1.2.3 which resolved to 1.2.3 and is required by Test
2) jquery#>= 1.7.0 < 4.0.0 which resolved to 3.3.1 and is required by ember#2.18.2
Prefix the choice with ! to persist it to bower.json
? Answer 2
bower install jquery#3.3.1
bower install ember#2.18.2
jquery#3.3.1 bower_components/jquery
ember#2.18.2 bower_components/ember
└── jquery#3.3.1
說(shuō)明：我們先把jQuery的1.2.3版本安裝到了項(xiàng)目中，然后又通過(guò)Bower來(lái)安裝ember，而ember組件需要依賴于jQuery框架，這里有個(gè)關(guān)鍵信息就是ember要求依賴的jQuery框架版本范圍為1.70 ~ 4.0.0和本地已經(jīng)安裝的jQuery 1.2.3沖突，Bower并不會(huì)自己處理這個(gè)問(wèn)題而是拋出一個(gè)異常，把選擇權(quán)交給用戶，由用戶來(lái)選擇使用哪種方案。
通過(guò)命令行的打印，我們看到Bower為我們提供了兩個(gè)可選項(xiàng)，第一個(gè)選項(xiàng)是保留本地已經(jīng)安裝的1.2.3版本，第二個(gè)選項(xiàng)是保存ember所依賴的版本，這里顯示了依賴需要的版本范圍jQuery#>=1.70<4.0.0和最終會(huì)決定(resolved)的版本(3.3.1)。上面的示例中，沖突產(chǎn)生后我們輸入2，選擇安裝jQuery的3.3.1版本。
③ 查看項(xiàng)目已安裝的組件信息
$ bower list
具體的組件和依賴結(jié)構(gòu)
Test /Users/文頂頂/Desktop/Test
├─┬ ember#2.18.2 (latest is 3.0.0-beta.2)
│ └── jquery#3.3.1
└── jquery#3.3.1 incompatible with 1.2.3 (1.2.3 available, latest is 3.3.1)
沖突處理完后，項(xiàng)目中原本下載安裝好的jQuery1.2.3版本被重新下載的3.3.1版本替代。
1.8 Bower自定義組件目錄
默認(rèn)情況下，所有的依賴包都被下載保存到bower_components文件路徑，如果想要把依賴包下載到自己指定的目錄，使用.bowerrc文件配合bower.json就可以實(shí)現(xiàn)。
在項(xiàng)目根目錄創(chuàng)建.bowerrc文件，使用json格式來(lái)設(shè)置文件路徑。
{ "directory": "指定路徑" }
保存好以后，執(zhí)行bower install命令，就會(huì)把bower.json配置好的相關(guān)組件全部下載到指定的路徑中。
命令行參考
bogon:Test wendingding$ touch .bowerrc
bogon:Test wendingding$ vim .bowerrc
bogon:Test wendingding$ cat .bowerrc
{
"directory": "app/xxx/"
}
bogon:Test wendingding$ cat bower.json
{
"name": "Test",
"authors": [
"flowerField <18681537032@163.com>"
],
"description": "",
"main": "",
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "^3.3.1"
}
}
bogon:Test wendingding$ bower install
bower invalid-meta for:/Users/文頂頂/Desktop/Test/bower.json
bower invalid-meta The "name" is recommended to be lowercase, can contain digits...
bower cached https://github.com/jquery/jquery-dist.git#3.3.1
bower validate 3.3.1 against https://github.com/jquery/jquery-dist.git#^3.3.1
bower install jquery#3.3.1
jquery#3.3.1 app/xxx/jquery
bogon:Test wendingding$ tree -L 3
.
├── app
│ └── xxx
│ └── jquery
└── bower.json
