bower到底是啥?

Bower(凉亭?)

BowerWeb开发中的一个前端文件包管理器。类似于Node模块的npm包管理器,它允许开发者为服务器编写可共享的模块。BowerWeb组件提供了类似的功能。

它凭借一个通用的、中性且易用的接口为依赖问题提供了一个解决方案。它是基于Git运行的,并且包是未知的。它还支持其他传送类型,比如requireJSAMD,等等。

1 安装

安装很简单:只需使用包管理器npm安装bower即可:

$ npm install -g bower

bower依赖于GitNodenpm

然后,可以通过输入help命令来确认它是否安装成功:

$ bower help

2 Bower简介

对于Web应用,你可能想要与其他开发人员共享源代码或者部署到其他开发机器上。与适用于npmpackage.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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值