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 全局的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

bower到底是啥？相关推荐

Web前端到底需要学什么？应该怎么学？
随着互联网的深入发展,Web前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习Web前端.那么Web前端到底需要学什么?Web前端 ...
[转载]Tensorflow 的reduce_sum()函数的axis，keep_dim这些参数到底是什么意思？
转载链接:https://www.zhihu.com/question/51325408/answer/125426642 来源:知乎这个问题无外乎有三个难点: 什么是sum 什么是reduce 什 ...
硬核科普：到底啥是云原生？
本文主要根据课程什么是云原生?_哔哩哔哩_bilibili 总结而来,其他参考文章如下: <云原生人才计划之Kubernetes 技术图谱>发布! - 知乎 (zhihu.com) ku ...
深度学习到底有哪些卷积？
深度学习到底有哪些卷积? 深度学习中不同种类的卷积(比如 2D / 3D / 1x1 /转置/扩张(Atrous)/空间可分/深度可分/平展/分组/混洗分组卷积),能帮理解实际的工作方式. 总结深度学 ...
CentOS7系统下bower 命令权限问题
执行bower命令后出现以下错误提示: bower ESUDO Cannot be run with sudo Additional error details: Since bowe ...
做技术到底可以做到哪种地步-技术为什么越走越窄（转）
尽管做技术已经有不少年头了,不管是犹犹豫豫还是坚定不移,我们走到了现在,依然走在技术这条路上. 不管我们处于何种职位,拿着哪种薪水,其实,我们会是不是的问问自己"做技术到底可以做到那种地步& ...
Django-C002-深入模型，到底有多深
此文章完成度[100%]留着以后忘记的回顾.多写多练多思考,我会努力写出有意思的demo,如果知识点有错误.误导,欢迎大家在评论处写下你的感想或者纠错. ORM介绍:对象关系映射(英语:(Object ...
yeomen/bower/grunt
yeomen: npm install yo angular-in-action project npm install -g generator-angular npm install -g gen ...
Web service到底是什么?
Web service到底是什么:在什么情况下你应该使用Web service. 分布式应用程序和浏览器研究一下当前的应用程序开发,你会发现一个绝对的倾向:人们开始偏爱基于浏览器的瘦客户应用程序.这 ...

bower到底是啥？

bower到底是啥？相关推荐

最新文章

热门文章