Bower(凉亭?)
Bower是Web开发中的一个前端文件包管理器。类似于Node模块的npm包管理器,它允许开发者为服务器编写可共享的模块。Bower为Web组件提供了类似的功能。
它凭借一个通用的、中性且易用的接口为依赖问题提供了一个解决方案。它是基于Git运行的,并且包是未知的。它还支持其他传送类型,比如requireJS、AMD,等等。
1 安装
安装很简单:只需使用包管理器npm安装bower即可:
$ npm install -g bower
bower依赖于Git、Node和npm。
然后,可以通过输入help命令来确认它是否安装成功:
$ bower help
2 Bower简介
对于Web应用,你可能想要与其他开发人员共享源代码或者部署到其他开发机器上。与适用于npm的package.json类似,可以使用一个bower.json文件存储前端依赖。
为了开始使用bower.json,可以使用Bower提供的init命令。我们应该在项目的根目录执行它:
$bower init
这条命令会启动一个设置向导,它问一些关于新程序包的问题。回答完以后,会在当前目录生成一个新的bower.json文件。
3 配置Bower
Bower自带了健全的默认配置,但它也是高度可配置的。你可以配置安装程序包的目录,并注册哪个目录用于安装组件。
https://docs.google.com/document/d/1APq7oA9tNao1UYWyOm8dKqlRP2blVkROYLZ
2fLIjtWc/edit#heading=h.4pzytc1f9j8k上可以看到更多的Bower配置文档。推荐你参
考这份文档了解更多详细配置信息。
尽管深入了解bower的配置信息不在本章范围之内,但我们将会看到两个最常见的修改配置项(基于我们自己的经验)。
要配置Bower,可以编辑.bowerrc文件,传递配置参数,或者设置环境变量。还可以将.bowerrc文件放在不同的地方:
q 项目当前工作目录中;
q 目录树的任意子目录中;
q 当前用户的主目录中;
q 全局的Bower目录中。
.bowerrc文件包含一个适用于配置的JSON对象。比如,要改变颜色配置,.bowerrc文件应该包含:
{
"color": false
}
为了简单起见,这里我们将.bowerrc文件放在项目的根目录中。如果不存在,推荐在项目的根目录中创建它:
$ echo "{}" > .bowerrc
cwd cwd配置变量表示应该从哪个目录运行Bower。所有其他路径都应该直接相对于这个目录。
{
"cwd": "app"
}
directory directory配置变量表示安装的组件应该保存在哪个路径中。默认为bower_components。这依赖于如何创建应用,可以修改这一配置以适应不同的目录结构:
{
"directory":"app/components"
}
4 搜索程序包
为了找到程序包用于安装,Bower包含了一个搜索命令用于搜索注册的索引:
## Searching for bootstrap-sass
$ bower search bootstrap-sass
5 安装程序包
安装程序包同样很简单。如果有一个现有的bower.json文件,可以简单地运行安装命令。它会拉取并安装前端依赖到Bower目录中:
$ bower install
你可以通过在文件上显示调用安装命令的方式,安装程序包到本地。也可以安装指定版本的程序包,甚至为程序包的安装设置一个别名。
# Install a local or
# default remote version of a package
$ bower install
# Install a specific version of a package
$ bower install
# Alias install a package
$ bower install name=
# For instance
$ bower install bootstrap=bootstrap-sass
bower.json文件可以存储多个类型的依赖:要么是运行时的依赖(比如Angular或者jQuery),或者是开发过程中需要的依赖(比如karma或者Bootstrap-sass)。
# Install a run-time dependency
$ bower install angular-route --save
# Install a dev dependency
$ bower install bootstrap-sass --save-dev
如果将bower.json文件的内容打印出来,将会看到使用新安装的依赖更新后的内容:
$ cat bower.json
{
"name": "myApp",
"version": "0.0.1",
"authors": [
"Ari Lerner
],
"license": "MIT",
"dependencies": {
"angular-route": "~1.2.13"
},
"devDependencies": {
"bootstrapp-sass": "~3.0.0"
}
}
6 使用程序包
现在程序包已经安装好了,我们可以通过在HTML源代码中使用script标记的方式引入这些程序包,就像引入本地目录中的任何其他脚本一样。
src="/bower_components/angular/angular.js">
7 移除程序包
使用Bower移除程序包也是可能的。可以在Bower目录手动删除文件,或者运行uninstall命令。这个uninstall命令允许我们使用--save和--save-dev标记映射bower.json文件的变化。
# Remove a dependency
$ bower uninstall --save-dev angular-route
# Remove a devDependency
$ boweruninstall --save-dev bootstrap-sass