Web 前端开发的包管理工具 bower

1. 什么是 bower，有什么作用
2. bower 安装
3. bower 命令
4. 使用 bower 下载库
已注册的包，使用简写即可
GitHub 上的项目，使用名称即可
GitHub上的项目
直接通过 URL 下载

1. 什么是 bower，有什么作用

富客户端要求的前端开发，少不了大量的前端库文件引用，于是就可能遇到如下问题：

逐个下载、复制到期望位置嫌麻烦
库之间的依赖/版本依赖不清楚，总是出问题
版本升级时重复性的操作，还易搞错
…

使用 bower 这样的包管理工具，可以很好的处理类似如上描述的问题。其实各种包管理工具的主要职责均类似如此。

2. bower 安装

需要系统已安装 nodejs。命令提示符下，执行如下命令安装 bower：
npm install bower -g

3. bower 命令

执行 bower help 命令，可以查看其所有命令及参数介绍：

Usage: bower [] [] Commands: cache Manage bower cache help Display help information about Bower home Opens a package homepage into your favorite browser info Info of a particular package init Interactively create a bower.json file install Install a package locally link Symlink a package folder list List local packages – and possible updates lookup Look up a package URL by name prune Removes local extraneous packages register Register a package search Search for a package by name update Update a local package uninstall Remove a local package version Bump a package version 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 –version Output Bower version See ‘bower help ’ for more information on a specific command.

命令简介：

cache: bower 缓存管理 help: 显示 Bower 命令的帮助信息 home: 通过浏览器打开一个包的 github 发布页 info: 查看包的信息 init: 创建 bower.json 文件 install: 安装包到项目 link: 在本地 bower 库建立一个项目链接 list: 列出项目已安装的包 lookup: 根据包名查询包的 URL prune: 删除项目无关的包 register: 注册一个包 search: 搜索包 update: 更新项目的包 uninstall: 删除项目的包

4. 使用 bower 下载库

作为各种库的管理工具，bower 主要就是对它们下载和管理。
举例，我们新建了一个项目，目录为 lzwme，我们的项目需要如下前端库：jquery 1.11.1、bootstrap、jquery UI、d3、datatables 1.10.2、echarts 、moment、backbone、seajs 。
针对项目 lzwme，我们可依次执行如下命令：

bower install jquery#1.11.1 –save bower install bootstrap –save bower install d3 –save bower install jqueryui –save bower install datatables#1.10.2 –save bower install echarts –save bower install moment –save bower install backbone –save bower install seajs –save

执行完每一条命令后，bower 都会自动下载对应库文件到 bower_components/ 目录，同时还会下载其依赖库，如下载 backbone 的同时还会下载 underscore。
bower 可使用如下几种方式下载文件

已注册的包，使用简写即可
$ bower install jquery

GitHub 上的项目，使用名称即可
$ bower install desandro/masonry

GitHub上的项目
$ bower install git://github.com/user/package.git

直接通过 URL 下载
$ bower install http://example.com/script.js

安装命令有如下参数可选：

-F, –force-latest: 不管冲突问题强制使用最新版本 -p, –production: 安装生产环境的库，不安装开发环境所需的文件 -S, –save: 将安装的包信息保存到项目的 bower.json 依赖配置中 -D, –save-dev: 将已安装的包信息保存到项目开发环境的 bower.json 依赖中

5. bower 功能使用举例

5.1. 查看已安装的库列表

bower list lzwme D:_development\lzwme ├─┬ backbone#1.1.2 extraneous │ └── underscore#1.7.0 ├─┬ bootstrap#3.2.0 extraneous │ └── jquery#1.11.1 (2.1.1 available) ├── d3#3.4.13 extraneous ├─┬ datatables#1.10.2 extraneous (latest is 1.10.3) │ └── jquery#1.11.1 (2.1.1 available) ├── echarts#2.0.4 extraneous ├── impress.js#0.5.3 extraneous ├── jquery#1.11.1 extraneous (latest is 2.1.1) ├─┬ jqueryui#1.11.2 extraneous │ └── jquery#1.11.1 (2.1.1 available) ├── moment#2.8.3 extraneous └── seajs#2.3.0 extraneous

5.2. 更新某个库

bower update

5.3. 卸载某个库

$ bower uninstall

5.4 查看本地缓存的库

bower cache list backbone=git://github.com/jashkenas/backbone.git#1.1.2 bootstrap=git://github.com/twbs/bootstrap.git#3.2.0 d3=git://github.com/mbostock/d3.git#3.4.13 datatables=git://github.com/DataTables/DataTables.git#1.10.2 echarts=git://github.com/ecomfe/echarts.git#2.0.4 impress.js=git://github.com/bartaz/impress.js.git#0.5.3 jquery=git://github.com/jquery/jquery.git#1.11.1 jquery=git://github.com/jquery/jquery.git#2.1.1 jquery-ui=git://github.com/components/jqueryui.git#1.11.2 moment=git://github.com/moment/moment.git#2.8.3 seajs=git://github.com/seajs/seajs.git#2.3.0 underscore=git://github.com/jashkenas/underscore.git#1.7.0

5.5 查看某个库的主页

bower lookup jquery D:_development\lzwme>bower lookup jquery jquery git://github.com/jquery/jquery.git

4.6 提交自己的类库到官方
请参考这里：http://bower.io/docs/creating-packages/

6. 使用下载的库

通过 bower 可以方便的对库文件进行下载、更新，但是我们不提倡在项目中直接使用 bower_components 目录，一方面这里的的文件可能并不是都是项目需要的，另一方面，如果项目中存在安全问题的文件，那么就会产生隐患了。
那么该如何使用这些文件呢，你可以自己选择复制到项目配置的目录中。当然，志文工作室还是推荐你使用自动化构建工具来快捷管理。
bower 推荐使用前端自动化构建工具 grunt （http://lzw.me/a/grunt-getting-started.html），并推荐了几个对应插件：
grunt-bower-concat
grunt-wiredep
grunt-bower-requirejs
grunt-bower-task
grunt-preen
http://bower.io/docs/tools/

1. 什么是 bower，有什么作用

2. bower 安装

3. bower 命令

4. 使用 bower 下载库

已注册的包，使用简写即可

GitHub 上的项目，使用名称即可

GitHub上的项目

直接通过 URL 下载

5. bower 功能使用举例

6. 使用下载的库

7. 更多参考