客户端包管理工具 Bower
问题
在浏览器应用中，经常需要引用第三方库，譬如： jquery
- 访问jQuery网站, 单击下载链接
- 将下载的.zip文件移动到项目目录中并解压缩
- 在页面中添加
<script>标记进行引用 - 如果需要升级到最新的版本，则需要手工重复上述过程
如果你的项目需要引用大量第三方库，则上述过程将十分烦琐！
bower： 浏览器端的软件包管理器
- bower软件的制作了提供了一个线上的集中代码仓库，存放有常见的各种js库(按bower支持包格式进行打包，如AMD)
- bower软件会自动在集中仓库站点中，按名称查询和搜索指定的第三方库(一般是在指定的中央仓库中或github上搜索)
- bower软件自动下载该库文件，并存放至指定的本地目录
- 当第三方库有更新时，工具可自动重复上述过程以完成升级
- 如需要依赖多个库，只需要开发人员指定名称列表，工具将自动完成上述安装过程
Bower https://bower.io/ 一种流行的浏览器软件包管理器
bower的安装
- Node：下载最新版本的node.js
- NPM： NPM是node程序包管理器
- Git： 由于需要从github等仓库下载软件包，故需要安装git，特别是windows版本
在控制台命令行中
npm install -g bower
bower help # 查看bower支持的命令，即安装成功
初始化
在命令行下，进入项目的根目录下
cd myblog
bower init # 将询问一系列问题，主要为项目的名称等相关信息
你会注意到，在根目录下多出了一个 bower.json的文件，这是当前bower为当前项目创建的配置文件，其中包含当前项目的配置信息，你可以按需更改
bower.json 示例
注意"dependencies"属性的值，将来安装的软件包的信息将出现在其中
{
"name": "myblog",
"version": "0.0.1",
"authors": [
"tom <tom@qq.com>"
],
"moduleType": [
"amd"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
}
}
安装一个软件包
$ bower install jquery --save
$ tree bower_components/
bower_components/
└── jquery
├── README.md
├── bower.json
├── component.json
├── composer.json
├── jquery-migrate.js
├── jquery-migrate.min.js
├── jquery.js
├── jquery.min.js
├── jquery.min.map
└── package.json
1 directory, 10 files
变化: bower_components 目录 和 bower.json
bower_components 目录被新建，并且多了一个jquery子目录，其中存放有jquery库文件
bower.json 增加了一行，即被下载的软件包的名称及版本号
"dependencies": {
"jquery": "~2.1.4"
}
使用已安装的 jquery 包
<head>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
</head>
升级 jquery 到 3.0.0
修改 bower.json
"dependencies": {
"jquery": "3.0.0"
}
然后命令行下执行下列命令，jquey的版本就被自动更新了
bower update
删除 jquery
bower uninstall jquery
请查看bower.json和bower_components目录的变化
重新安装所有库
编辑 bower.json,为其中的dependencies属性增加多个依赖库的信息，然后：
bower install
即可一次性安装所有依赖的软件库
查找和增加更多库
# 在仓库中查找指定名称的第三方库
bower search bootstrap
# 在网上查看某个库的详细信息
bower info bootstrap
# 查看某个版本的详细信息
bower info bootstrap#3.0.0
# 列出本地已安装的所有代码库
bower list
# 各种安装方式
bower install jquery-ui#1.10.1
bower install git://github.com/documentcloud/backbone.git
bower install http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js
bower install ./some/path/relative/to/this/directory/backbone.js
配置文件 .bowerrc
如果你想更改bower的以下默认行为，譬如默认安装目录 bower_components 的名字太长不好记，则可以通过当前项目根目录下的.bowerrc 文件进行配置
{
"directory" : "js/lib",
"json" : "bower.json",
"endpoint" : "https://Bower.herokuapp.com",
"searchpath" : "",
"shorthand_resolver" : ""
}
- directory：下载和保存库文件的子目录名。
- json： 项目配置文件的文件名。
- endpoint：中央索引站点的网址，这是由bower社区共同维护的一个站点，用于记录兼容bower的各个代码库的信息，用于search和info等命令
- searchpath：一个数组，备份索引站点。如果在endpoint中找不到，则继续搜索该属性指定的网址，通常用于放置某些不公开的库。
- shorthand_resolver：可定义各个代码库的名称的简写形式
提交你的软件包信息到bower
如果你编写了一个工具库或jquery插件，可以使用bower init生成bower.json文件，然后向bower仓库提交你的库，这样，其他人就能通过bower进行共享和使用了。
# bower register <my-package-name> <git-endpoint>
bower register jquery-myplugin git://github.com/xxx/jquery-myplugin
注意：如果你的package-name是驼峰式命名，将会注册失败。