2.4 Bower——js依赖管理的工具
2.4.1 bower介绍
Bower是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过Bower 来管理模块间的这种联系。
包管理工具一般有以下的功能：
1、注册机制：每个包需要确定一个唯一的ID 使得搜索和下载的时候能够正确匹配，所以包管理工具需要维护注册信息，可以依赖其他平台。
2、文件存储：确定文件存放的位置，下载的时候可以找到，当然这个地址在网络上是可访问的。
3、上传下载：这是工具的主要功能，能提高包使用的便利性。比如想用jquery 只需要 install 一下就可以了，不用到处找下载。上传并不是必备的，根据文件存储的位置而定，但需要有一定的机制保障。
4、依赖分析：这也是包管理工具主要解决的问题之一，既然包之间是有联系的，那么下载的时候就需要处理他们之间的依赖。下载一个包的时候也需要下载依赖的包。
功能介绍，摘自文章：http://chuo.me/2013/02/twitter-bower.html
2.4.2 bower安装
bower插件是通过npm, Node.js包管理器安装和管理的.
2.4.2.1 我的系统环境
win7 64bit
Nodejs:v0.10.5
Npm:1.2.19
~ D:\workspace\javascript>node –v v0.10.5
~ D:\workspace\javascript>npm –v 1.2.19
在系统中，我们已经安装好了Nodejs和npm。win7安装nodejs请参考文章：Nodejs开发框架Express3.0开发手记–从零开始
2.4.2.2 安装bower
全局安装bower
~ D:\workspace\javascript>npm install bower -g
新建一个express3的项目nodejs-bower
~ D:\workspace\javascript>express -e nodejs-bower
~ D:\workspace\javascript>cd
nodejs-bower && npm install
Mac下安装：
sudo npm
install -g bower
2.4.3 bower命令
Commands，列出了bower支持的各种命令。
cache: bower缓存管理
help: 显示Bower命令的帮助信息
home: 通过浏览器打开一个包的github发布页
info: 查看包的信息
init: 创建bower.json文件
install: 安装包到项目
link: 在本地bower库建立一个项目链接
list: 列出项目已安装的包
lookup: 根据包名查询包的URL
prune: 删除项目无关的包
register: 注册一个包
search: 搜索包
update: 更新项目的包
uninstall: 删除项目的包
2.4.4 bower使用范例
2.4.4.1 安装jQuery到项目nodejs-bower
~ D:\workspace\javascript\nodejs-bower>bower install jquery
bower jquery#* not-cached git://github.com/components/jquery.git#*
bower jquery#* resolve git://github.com/components/jquery.git#*
bower jquery#* download https://github.com/components/jquery/archive/2.0.3.tar.gz
bower jquery#* extract archive.tar.gz
bower jquery#* resolved git://github.com/components/jquery.git#2.0.3
bower jquery#~2.0.3 install jquery#2.0.3
jquery#2.0.3 bower_components\jquery
通过执行命令，我们可以看到jQuery的最新版本被下载，并安装到项目的bower_components\jquery目录
查看bower_components/jquery目录，发现了3个文件。
~ D:\workspace\javascript\nodejs-bower>ls bower_components/jquery -a
. .. .bower.json component.json jquery.js
同样地，我们的项目还需要d3的类库
~ D:\workspace\javascript\nodejs-bower>bower install d3
bower d3#* not-cached git://github.com/mbostock/d3.git#*
bower d3#* resolvegit://github.com/mbostock/d3.git#*
bower d3#* download https://github.com/mbostock/d3/archive/v3.2.8.tar.gz
bower d3#* extract archive.tar.gz
bower d3#* resolved git://github.com/mbostock/d3.git#3.2.8
bower d3#~3.2.8 install d3#3.2.8
d3#3.2.8 bower_components\d3
非常方便，下载并安装完成！
2.4.4.2 查看项目中已导入的类库
~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new Checking for newversions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├── d3#3.2.8
└── jquery#2.0.3
2.4.4.3 安装bootstrap库，并查看依赖情况
~ D:\workspace\javascript\nodejs-bower>bower install bootstrap
bower bootstrap#* cached git://github.com/twbs/bootstrap.git#3.0.0-rc1
bower bootstrap#* validate 3.0.0-rc1 againstgit://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.0 cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower bootstrap#~3.0.0-rc1 install bootstrap#3.0.0-rc1
bootstrap#3.0.0-rc1 bower_components\bootstrap
└── jquery#2.0.3
~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new Checking for newversions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery#2.0.3
├── d3#3.2.8
└── jquery#2.0.3
我们发现bootstrap，对jquery是有依赖的。
2.4.4.4 删除jQuery库，破坏依赖关系
~ D:\workspace\javascript\nodejs-bower>bower uninstall jquery
bower conflict bootstrapdepends on jquery
Continue anyway? (y/n) y
bower uninstall jquery
~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new Checking for newversions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery missing
├── d3#3.2.8
└── jquery missing
2.4.4.5 安装低版本的jQuery，制造不版本兼容
~ D:\workspace\javascript\nodejs-bower>bower install jquery#1.7.2
bower jquery#~2.0.3 cached git://github.com/components/jquery.git#2.0.3
bower jquery#~2.0.3 validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3
bower jquery#>= 1.9.0 cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0 validate 2.0.3 againstgit://github.com/components/jquery.git#>= 1.9.0
bower jquery#1.7.2 cached git://github.com/components/jquery.git#1.7.2
bower jquery#1.7.2 validate 1.7.2 against git://github.com/components/jquery.git#1.7.2
Unable to find a suitable version for jquery, please choose one:
1) jquery#1.7.2 which resolvedto 1.7.2
2) jquery#~2.0.3 which resolvedto 2.0.3 and has nodejs-bower as dependants
3) jquery#>= 1.9.0 whichresolved to 2.0.3 and has bootstrap#3.0.0-rc1 as dependants
Prefix the choice with ! to persist it to bower.json
Choice: 1
bower jquery#1.7.2 install jquery#1.7.2
jquery#1.7.2 bower_components\jquery
~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new Checking for newversions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery#1.7.2 incompatible with >= 1.9.0 (2.0.3 available)
├── d3#3.2.8
└── jquery#1.7.2 incompatible with ~2.0.3 (2.0.3 available)
我们可以清楚的看到bower，很明确的告诉了我们，jquery和bootstrap是不兼容的，强大之处大家应该有所体会。
2.4.4.6 升级jQuery，让版本兼容
~ D:\workspace\javascript\nodejs-bower>bower update jquery
bower jquery#~2.0.3 cached git://github.com/components/jquery.git#2.0.3
bower jquery#~2.0.3 validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3
bower jquery#>= 1.9.0 cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>=1.9.0
bower jquery#~2.0.3 install jquery#2.0.3
jquery#2.0.3 bower_components\jquery
~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new Checking for newversions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery#2.0.3
├── d3#3.2.8
└── jquery#2.0.3
多么智能，一键搞定，这才是高效的开发。
2.4.4.7 查看本地bower已经缓存的类库
~ D:\workspace\javascript\nodejs-bower>bower cache list
bootstrap=git://github.com/twbs/bootstrap.git#3.0.0-rc1
d3=git://github.com/mbostock/d3.git#3.2.8
jquery=git://github.com/components/jquery.git#1.7.2
jquery=git://github.com/components/jquery.git#2.0.3
2.4.4.8 查看D3库信息
~ D:\workspace\javascript\nodejs-bower>bower info d3
d3
Versions:
- 3.2.8
- 3.2.7
- 3.2.6
- 3.2.5
- 3.2.4
- 3.2.3
...
2.4.4.9 查看dojo库的url
~ D:\workspace\javascript\nodejs-bower>bower lookup dojo
dojo git://github.com/dojo/dojo.git
2.4.4.10 用浏览器打开dojo的发布主页
~ D:\workspace\javascript\nodejs-bower>bower home dojo
bower dojo#* not-cachedgit://github.com/dojo/dojo.git#*
bower dojo#* resolve git://github.com/dojo/dojo.git#*
bower dojo#* download https://github.com/dojo/dojo/archive/1.9.1.tar.gz
bower dojo#* extract archive.tar.gz
bower dojo#* resolved git://github.com/dojo/dojo.git#1.9.1
浏览器自动打开：https://github.com/dojo/dojo
2.4.4.11 查询包含dojo的类库
~ D:\workspace\javascript\nodejs-bower>bower search dojo
Search results:
dojogit://github.com/dojo/dojo.git
dojoxgit://github.com/dojo/dojox.git
dojo-utilgit://github.com/dojo/util.git
dojo-bootstrapgit://github.com/samvdb/Dojo-Bootstrap
真是方便实用的技术。
2.4.5 用bower提交自己类库
2.4.5.1 生成bower.json配置文件
~ D:\workspace\javascript\nodejs-bower>bower init
bower existing The existingbower.json file will be used and filled in
[?] name: nodejs-bower
[?] version: 0.0.0
[?] main file:
[?] set currently installed components as dependencies? No
[?] add commonly ignored files to ignore list? Yes
查看生成的文件bower.json
{
"name":"nodejs-bower",
"version":"0.0.0",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"d3":"git://github.com/mbostock/d3.git#~3.2.8",
"jquery":"git://github.com/components/jquery.git#~2.0.3"
}
}
2.4.5.2 在github创建一个资源库
2). 在github创建一个资源库：nodejs-bower
2.4.5.3 本地工程绑定github
~ D:\workspace\javascript\nodejs-bower>git init
Initialized empty Git repository inD:/workspace/javascript/nodejs-bower/.git/
~ D:\workspace\javascript\nodejs-bower>git add .
~ D:\workspace\javascript\nodejs-bower>git commit -m "firstcommit"
# On branch master
#
# Initial commit
#
# Untracked files:
# (use "git add ..." toinclude in what will be committed)
#
# app.js
# bower.json
# bower_components/
# node_modules/
# package.json
# public/
# routes/
# views/
nothing added to commit but untracked files present (use "gitadd" to track)
~ D:\workspace\javascript\nodejs-bower>git remote add originhttps://github.com/bsspirit/nodejs-bower
~ D:\workspace\javascript\nodejs-bower>git push -u origin master
Counting objects: 565, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (516/516), done.
Writing objects: 100% (565/565), 803.08 KiB, done.
Total 565 (delta 26), reused 0 (delta 0)
To https://github.com/bsspirit/nodejs-bower
* [new branch] master -> master
Branch master set up to track remote branch master from origin.
2.4.5.4 注册到bower官方类库
4). 注册到bower官方类库
~ D:\workspace\javascript\nodejs-bower>bower register nodejs-bowergit@github.com:bsspirit/nodejs-bower.git
bower convert Converted git@github.com:bsspirit/nodejs-bower.git togit://github.com/bsspirit/nodejs-bower.git
bower nodejs-bower#* resolve git://github.com/bsspirit/nodejs-bower.git#*
bower nodejs-bower#* checkout master
bower nodejs-bower#* resolved git://github.com/bsspirit/nodejs-bower.git#af3ceaac07
Registering a package will make it visible and installable via the registry (https://bower.herokuapp.com), continue? (y/n) y
bower nodejs-bower register git://github.com/bsspirit/nodejs-bower.git
Package nodejs-bower registered successfully!
All valid semver tags on git://github.com/bsspirit/nodejs-bower.git will be available as versions.
To publish a new version, you just need release a valid semver tag.
Run bower info nodejs-bower to list the package versions.
2.4.5.5 查询我们自己的包
5). 查询我们自己的包
D:\workspace\javascript\nodejs-bower>bower search nodejs-bower
Search results:
nodejs-bowergit://github.com/bsspirit/nodejs-bower.git
2.4.5.6 安装我们自己的包
6). 安装我们自己的包
D:\workspace\javascript\nodejs-bower>bower install nodejs-bower
bower nodejs-bower#* cached git://github.com/bsspirit/nodejs-bower.git#af3ceaac07
bower nodejs-bower#* validate af3ceaac07 against git://github.com/bsspirit/nodejs-bower.git#*
bower nodejs-bower#* install nodejs-bower#af3ceaac07
nodejs-bower#af3ceaac07 bower_components\nodejs-bower
├── d3#3.2.8
└── jquery#2.0.3
其实模块化，版本依赖，开发类库，发布类库，安装类库，都是一条命令！还能再简单一点么！快把项目模块化，然后分享给大家吧！！未来是属于开发者的。
2.4.6 在WebStorm中使用bower
2.4.6.1 往bower.json中添加插件包
内容格式如下：
{
"name":"HJNodeJSPro2",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "1.4.x",
"angular-mocks": "1.4.x",
"jquery": "~2.1.1",
"bootstrap": "~3.1.1",
"angular-route": "1.4.x",
"angular-resource": "1.4.x",
"angular-animate": "1.4.x",
“susy”,
}
}
2.4.7 参考链接
Bower—— 一个Web的包管理工具
http://ce.sysu.edu.cn/hope/Item/119408.aspx
(Good)Using Bower in WebStorm
http://blog.jetbrains.com/webstorm/2014/04/using-bower-in-webstorm/
js依赖管理的工具
bower解决js的依赖管理
