bower到底是啥？

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

# Install a specific version of a package

$ bower install <package>#<version>

# Alias install a package

$ bower install name=<package>#<version>

# 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 <ari@fullstack.io>"

],

"license": "MIT",

"dependencies": {

"angular-route": "~1.2.13"

},

"devDependencies": {

"bootstrapp-sass": "~3.0.0"

}

}

6 使用程序包

现在程序包已经安装好了，我们可以通过在HTML源代码中使用script标记的方式引入这些程序包，就像引入本地目录中的任何其他脚本一样。

<script

src="/bower_components/angular/angular.js">

</script>

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