Web 前端开发的包管理工具 bower 快速入门

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

富客户端要求的前端开发，少不了大量的前端库文件引用，于是就可能遇到如下问题：
逐个下载、复制到期望位置嫌麻烦
库之间的依赖/版本依赖不清楚，总是出问题
版本升级时重复性的操作，还易搞错
…

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

2. bower 安装

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

npm install bower -g

3. bower 命令

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

Usage:

bower <command> [<args>] [<options>]

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 <command>’ 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，我们可依次
4000
执行如下命令：

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 <package-name>

5.3. 卸载某个库

$ bower uninstall <package-name>

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/

7. 更多参考

http://bower.io/
https://github.com/bower/bower https://github.com/yatskevich/grunt-bower-task
本文固定链接: https://lzw.me/a/bower-getting-started.html | 志文工作室





该日志由 任侠 于2014年10月24日发表在 前端开发 分类下，
你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。 

原创文章转载请注明: Web
前端开发的包管理工具 bower 快速入门 | 志文工作室

关键字: bower, 前端开发, 包管理