1. bower介绍

Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系。

包管理工具一般有以下的功能：

• 注册机制：每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配，所以包管理工具需要维护注册信息，可以依赖其他平台。

• 文件存储：确定文件存放的位置，下载的时候可以找到，当然这个地址在网络上是可访问的。

• 上传下载：这是工具的主要功能，能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了，不用到处找下载。上传并不是必备的，根据文件存储的位置而定，但需要有一定的机制保障。

• 依赖分析：这也是包管理工具主要解决的问题之一，既然包之间是有联系的，那么下载的时候就需要处理他们之间的依赖。下载一个包的时候也需要下载依赖的包。

功能介绍，摘自文章：http://chuo.me/2013/02/twitter-bower.html

2. bower安装

bower插件是通过npm, Node.js包管理器安装和管理的.

我的系统环境

• 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开发手记–从零开始

安装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

3. bower命令

bower安装后，我们就可以用bower这个命令了。

~ D:\workspace\javascript\nodejs-bower>bower
Usage:bower[] []
Commands:cache                   Manage bower cachehelp                    Display help information about Bowerhome                    Opens a package homepage into your favorite browserinfo                    Info of a particular packageinit                    Interactively create a bower.json fileinstall                 Install a package locallylink                    Symlink a package folderlist                    List local packageslookup                  Look up a package URL by nameprune                   Removes local extraneous packagesregister                Register a packagesearch                  Search for a package by nameupdate                  Update a local packageuninstall               Remove a local package
Options:-f, --force             Makes various commands more forceful-j, --json              Output consumable JSON-l, --log-level         What level of logs to report-o, --offline           Do not hit the network-q, --quiet             Only output important information-s, --silent            Do not output anything, besides errors-V, --verbose           Makes output more verbose--allow-root            Allows running commands as root
See 'bower help' for more information on a specific command.

Commands，列出了bower支持的各种命令。

• cache:bower缓存管理

• help:显示Bower命令的帮助信息

• home:通过浏览器打开一个包的github发布页

• info:查看包的信息

• init:创建bower.json文件

• install:安装包到项目

• link:在本地bower库建立一个项目链接

• list:列出项目已安装的包

• lookup:根据包名查询包的URL

• prune:删除项目无关的包

• register:注册一个包

• search:搜索包

• update:更新项目的包

• uninstall:删除项目的包

4. bower使用

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.3jquery#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#*                     resolve git://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.8d3#3.2.8 bower_components\d3

非常方便，下载并安装完成！

2). 查看项目中已导入的类库

~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├── d3#3.2.8
└── jquery#2.0.3

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 against git://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-rc1bootstrap#3.0.0-rc1 bower_components\bootstrap
└── jquery#2.0.3~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions 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是有依赖的。

4). 删除jQuery库，破坏依赖关系

~ D:\workspace\javascript\nodejs-bower>bower uninstall jquery
bower conflict      bootstrap depends on jquery
Continue anyway? (y/n) y
bower uninstall     jquery~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions 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

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 against git://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.2Unable to find a suitable version for jquery, please choose one:1) jquery#1.7.2 which resolved to 1.7.22) jquery#~2.0.3 which resolved to 2.0.3 and has nodejs-bower as dependants3) jquery#>= 1.9.0 which resolved to 2.0.3 and has bootstrap#3.0.0-rc1 as dependantsPrefix the choice with ! to persist it to bower.jsonChoice: 1
bower jquery#1.7.2             install jquery#1.7.2jquery#1.7.2 bower_components\jquery~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions 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是不兼容的，强大之处大家应该有所体会。

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.3jquery#2.0.3 bower_components\jquery~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions 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

多么智能，一键搞定，这才是高效的开发。

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

8). 查看D3库信息

~ D:\workspace\javascript\nodejs-bower>bower info d3
d3Versions:- 3.2.8- 3.2.7- 3.2.6- 3.2.5- 3.2.4- 3.2.3...

9). 查看dojo库的url

~ D:\workspace\javascript\nodejs-bower>bower lookup dojo
dojo git://github.com/dojo/dojo.git

10). 用浏览器打开dojo的发布主页

~ D:\workspace\javascript\nodejs-bower>bower home dojo
bower dojo#*                not-cached git://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

11). 查询包含dojo的类库

~ D:\workspace\javascript\nodejs-bower>bower search dojo
Search results:dojo git://github.com/dojo/dojo.gitdojox git://github.com/dojo/dojox.gitdojo-util git://github.com/dojo/util.gitdojo-bootstrap git://github.com/samvdb/Dojo-Bootstrap

真是方便实用的技术。