由上篇《 Node.js 自動化工具 - YEOMAN 》接著開始研究另一個新的工具 Bower 蔼紧。
我們在擁有腳手架之后，還需要什么來構(gòu)建我們的項目呢偷厦？當(dāng)然是需要一堆的框架奢驯，插件來幫助自己快速搭建估蹄，畢竟站在巨人的肩膀上才能看得更遠！當(dāng)這樣的一堆東西引入到我們的項目中荠列，帶來工作的便利同時也帶來一堆管理問題：版本类浪、依賴、引入混亂肌似、命名空間污染 ...
我們急需一個能夠管理這些包的工具费就，Bower 就這樣誕生了。打開它的官網(wǎng) Bower 可以看到這樣的一句話
A package manager for the web
一個應(yīng)用于前端的包管理器
Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.
Bower能對前端框架川队，前端庫力细，資源和 common代碼進行管理
從上面的描述我們可以了解到 Bower 的具體功能，但開始學(xué)習(xí)前我被官網(wǎng)這樣的一句話嚇到：
...psst ! While Bower is maintained, we recommend yarn and webpack for new front-end projects !
不是吧固额，我都還沒學(xué)你眠蚂，你就推薦我用別的工具了？
webpack 前面介紹過一點对雪，以后會具體講解河狐，yarn 大家可能不太清楚，它是由 Facebook 推出一款欲代替 npm 的工具瑟捣，用過 npm 都知道馋艺，雖然它很好用但是
每次下載一個包都還對應(yīng)下載一堆文件下來，輸出非常冗余
安裝的時候無法保證速度/一致性
安全問題迈套，因為 npm 安裝時允許運行代碼
間歇性抽風(fēng) ╮(︶﹏︶")╭
這是由于它自身的底層設(shè)計思想決定的捐祠，不然我們直接用 npm 管理包就好啦，干嘛要用 Bower 桑李。不僅是因為 Bower 更加簡潔踱蛀，更是因為 Bower 只是為前端服務(wù)的管理工具窿给，比起 npm 的包羅萬象，它專業(yè)對口呀Ｂ示堋（Bower 是由 Twitter 的兩個工程師研發(fā)的）
想了解更多的對比的可以看看張大俠這篇文章《 我們?yōu)槭裁匆獜腘PM切換到Y(jié)arn 》
當(dāng)然除了我們前端崩泡，其他領(lǐng)域也是需要解決 npm 所帶來的問題的嘛～
在硅谷 Fackbook 總部那間敞亮的辦公室里，扎克伯格用著 npm 管理他的新項目猬膨，用著用著實在難以忍受角撞，怒吼一聲你們給我開發(fā)個新的管理工具出來！員工們心想 “ 不是吧勃痴，又要加班谒所，不行，拉上別人一起死 ” 于是跟老板提出我們自己搞不定啊沛申，不如叫上 Google, Exponent 和 Tilde 他們一起搞吧劣领，于是硅谷又開始了一輪燈火通明的夜晚 （以上純屬瞎掰）
當(dāng)然來除了 Yarn ，npm 自己也開發(fā) npm3 來解決這些問題铁材，這兩個我以后再研究尖淘。
羅哩叭嗦一通后，雖然不知道這個 Bower 維護要到什么時候 （這句話掛在上面很久了衫贬，也傳聞它將停止維護德澈，不曉得是不是 Twitter 不景氣都沒精力維護 Bower 了），但是還是可以用的呀固惯，所以我們正式開始學(xué)習(xí)吧~
安裝 Bower
Bower是依賴于 node梆造，npm 和 git；在安裝前確保三個依賴葬毫，以保證安裝過程不會出錯镇辉。
在命令行中輸入以下代碼：
$ npm install -g bower
輸入以下代碼驗證是否安裝成功：
$ bower -v
當(dāng)你看到輸出版本號的時候表明安裝成功了。
Install packages
類似于 node 建立的 package.json 贴捡，Bower 也是存在一個 bower.json 來管理你所需的包信息忽肛；
運行一下命令新建 bower.json 文件：
$ bower init
對的，他又出現(xiàn)一堆問題選擇烂斋，跟 yoman 類似屹逛，這里我挑幾點說明一下：
- set currently installed components as dependencies?
是否將當(dāng)前項目的已經(jīng)存在的組件寫入 bower.json 作為依賴性？
-
add commonly ignored files to ignore list?
是否添加一些一般都會忽略的包在你的忽略列表中汛骂？ -
would you like to mark this package as private which prevents it from being accidentally published to the registry?
您是否希望將這個包標記為私有罕模，以防止它意外地發(fā)布到注冊表中? （防止意外發(fā)布到 bower 的庫中） -
license
具體查看我這篇《 七種開源許可證 》
// 最終我們會得到的json文件
{
"name": "Bower",
"authors": [
"Max.Law"
],
"description": "demo",
"main": "",
"keywords": [
"bower"
],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
詳細的 bower.json 可以查看官方說明
現(xiàn)在我們以 jquery 為例，運行代碼：
$ bower install jquery --save-dev
后加上 --save-dev 表明在 bower.json 中寫入依賴
"devDependencies": {
"jquery": "^3.2.1"
}
成功后帘瞭，我們就可以看到新增了一個文件夾 bower_components 在里面就能找到你想要的 jquery 啦淑掌！
當(dāng)然除了 GitHub 短語 ，還可以用 Git 節(jié)點蝶念，URL 來實現(xiàn)包下載：
Search packages
你可以在 Bower Search 上搜索在 Bower 注冊的插件抛腕。
Use packages
最基本方法：
<script src="bower_components/jquery/dist/jquery.min.js"></script>
你除了可以手動將包引入芋绸，還可以利用 Grunt, RequireJS, Yeoman, and lots of other tools 等實現(xiàn)自己引入，這個我在后面的 Gulp 篇中講解這其中的一種方法担敌。
好了摔敛，這就是最基本的 Bower 應(yīng)用了，下面我們繼續(xù)擴展一下柄错。
注冊自己的包
需滿足一下條件：
To register a new package:
- The package name must adhere to the bower.json spec.
- There must be a valid bower.json in the project’s root directory.
- Your package should use semver Git tags. The v prefix is allowed.
- Your package must be publically available at a Git endpoint (e.g., GitHub). Remember to push your Git tags!
- For private packages (e.g. GitHub Enterprise), please consider running a private Bower registry.
運行一下命令就能夠在 Bower 上注冊提供給別人下載啦舷夺！
$ bower register <my-package-name> <git-endpoint>
# for example
$ bower register example git://github.com/user/example.git
注銷同樣簡單，先確保你是該包的GitHub擁有者售貌，并輸入一下命令：
bower login
# enter username and password
? Username:
? Password:
# unregister packages after successful login
bower unregister <package>
API
篩選一些有用的API出來：
1. cache - 緩存處理
列出緩存過的包信息列表，會得到全部的包名 + 地址
$ bower cache list
輸出 ==>
jquery=https://github.com/jquery/jquery-dist.git#3.2.1
也可以單獨查詢：
$ bower cache list jquery
or
$ bower cache list [jquery,vue,...]
緩存處理
$ bower cache clean
$ bower cache clean <name> [<name> ...]
$ bower cache clean <name>#<version> [<name>#<version> ..]
2. list - 本地包管理
$ bower list [<options>]
可用于查看本地包列表與可升級包情況
list options
-p, --paths: Generates a simple JSON source mapping
-r, --relative: Make paths relative to the directory config property, which defaults to bower_components
3. install - 包安裝
$ bower install [<options>]
$ bower install <endpoint> [<endpoint> ..] [<options>]
install options:
-F, --force-latest: Force latest version on conflict
-p, --production: Do not install project devDependencies
-S, --save: Save installed packages into the project’s bower.json dependencies
-D, --save-dev: Save installed packages into the project’s bower.json devDependencies
-E, --save-exact: Configure installed packages with an exact version rather than semver
4. login - 登錄GitHub
$ bower login [-t, --token]
后面參數(shù)的意思是通過現(xiàn)有的GitHub認證令牌疫萤，而不是提示用戶名和密碼
5. update- 更新包
$ bower update <name> [<name> ..] [<options>]
update options:
--F, --force-latest: Force latest version on conflict
-p, --production: Do not install project devDependencies
-S, --save: Update dependencies in bower.json
-D, --save-dev: Update devDependencies in bower.json
6. uninstall - 刪除包
$ bower uninstall <name> [<name> ..] [<options>]
uninstall options
-S, --save: Remove uninstalled packages from the project’s bower.json dependencies
-D, --save-dev: Remove uninstalled packages from the project’s bower.json devDependencies
7. Using local cache - 使用本地包
$ bower install <package> --offline
假如這個包在之前安裝過颂跨，可以離線運用
8. info - 包版本等信息
$ bower info <package>
$ bower info <package> [<property>]
$ bower info <package>#<version> [<property>]
假設(shè)運行：
$ bower info jquery
bower jquery#* cached https://github.com/jquery/jquery-dist.git#3.2.1
bower jquery#* validate 3.2.1 against https://github.com/jquery/jquery-dist.git#*
{
name: 'jquery',
main: 'dist/jquery.js',
license: 'MIT',
ignore: [
'package.json'
],
keywords: [
'jquery',
'javascript',
'browser',
'library'
],
homepage: 'https://github.com/jquery/jquery-dist',
version: '3.2.1'
}
Available versions:
- 3.2.1
- 3.2.0
- 3.1.1
- 3.1.0
- 3.0.0
- 2.2.4
- 2.2.3
- 2.2.2
- 2.2.1
- 2.2.0
- 2.1.4
- 2.1.3
- 2.1.2
- 2.1.1
- 2.1.0
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.12.4
- 1.12.3
- 1.12.2
- 1.12.1
- 1.12.0
- 1.11.3
- 1.11.2
- 1.11.1
- 1.11.0
- 1.10.2
- 1.10.1
- 1.10.0
- 1.9.1
- 1.9.0
- 1.8.3
- 1.8.2
- 1.8.1
- 1.8.0
- 1.7.2
- 1.7.1
- 1.7.0
- 1.6.4
- 1.6.3
- 1.6.2
- 1.6.1
- 1.6.0
- 1.5.2
- 1.5.1
- 1.5.0
- 1.4.4
- 1.4.3
- 1.4.2
- 1.4.1
- 1.4.0
- 1.3.2
- 1.3.1
- 1.3.0
- 1.2.6
- 1.2.5
- 1.2.4
- 1.2.3
- 1.2.2
- 1.2.1
- 1.1.4
- 1.1.3
- 1.1.2
- 1.1.1
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
Show 22 additional prereleases with ‘bower info jquery --verbose’
You can request info for a specific version with 'bower info jquery#<version>'
好啦，基本上 Bower 的用法就是這樣了
下篇我們來學(xué)習(xí)《 Node.js 自動化工具 - Gulp 》
該篇收錄于文集：Node教程
