Bower是一个用于管理前端依赖的包管理器(Package Manager),该开源项目由Twitter创建。与此相对应的包括,PHP的Composer
,Node的NPM
,和Ruby的RubyGems
。本文通过结合官方文档和一些简单的实例来展示Bower是如何提升开发效率的。
使用类似于Bower这样的包管理器主要基于以下几个原因:
Bower依赖于Node.js,Git(资源主要通过git进行下载),因此你需要提前安装好,才能正常安装bower。 Bower可以通过NPM进行安装:
$ npm install -g bower //全局安装bower $ bower --version //检查版本确认是否安装好 1.3.12 //本文使用的bower版本
Bower的基础使用,可以参考这篇文章。本文依然会介绍Bower的常用使用细节,但综合了多篇文章和Bower的官方文档。下面我们通过一个示例项目来使用Bower,首先创建项目目录
$ bower help //帮助命令 $ mkdir bower-in-action $ cd bower-in-action $ mkdir jquery-in-action $ cd jquery-in-action
安装jQuery和Bootstrap依赖
$ bower install jquery $ bower install bootstrap
项目会自动生成bower_components
目录,jquery和bootstrap的相关文件都会被下载到该文件夹内。
安装依赖可以有很多种方式,主要包括以下4种方式:
# registered package $ bower install jquery # GitHub shorthand $ bower install desandro/masonry # Git endpoint $ bower install git://github.com/user/package.git # URL $ bower install http://example.com/script.js
卸载包
$ bower uninstall jquery
搜索相关的依赖,你可以使用如下工具
http://bower.io/search/
当然你也可以使用一个bower指令来搜索,但不如web页面来的方便直观
$ bower search bootstrap
为了在项目中使用Bower
,你需要下面两个文件
.bowerrc
用于告诉Bower需要将依赖安装在什么地方bower.json
用于告诉Bower需要安装那些依赖Bower的默认目录为项目根目录下的bower_components
,通常我们不想使用这个文件夹。我们可以创建.bowerrc
文件,并在其中使用JSON语法配置目录信息:
// .bowerrc { "directory": "libs" }
接来下,我们安装的依赖包都会下载到这个目录中。
为我们通常通过bower.json
文件来管理依赖包。可以通过下面的的命令生成bower.json
文件:
bower init
它会自动提示你输入一系列的内容,以生成最终的文件,包括项目名称、版本号、作者信息、项目描述信息、关键词、开源证书等等。关于bower.josn文件的详细解释可以参考链接页面,这里示例文件如下:
{ "name": "jquery-in-action", "version": "0.0.0", "authors": [ "Weiwei <ww.sun@outlook.com>" ], "description": "test bower using jquery & bootstrap", "keywords": [ "jquery", "bootstrap" ], "license": "MIT", "dependencies": { "bootstrap": "latest", "font-awesome": "latest", "animate.css": "latest", "angular": "latest" }, "devDependencies": { "angular": "~1.3.8" } }
需要注意的是,这里有两个版本的依赖,一个是dependencies
,另一个是devDependencies
,分别代表生产环境和开发环境中的依赖包,两种环境在很多情况下有区别,比如在开发环境中我们通常使用jquery.js、开启详细的日志;在生产环境中通常使用jquery.min.js、向用户暴露简单的错误信息。它们可以分别通过下面两个指令自动添加:
bower install jquery --save //添加到dependencies bower install angular --save-dev //添加到devDependencies
下面我们来编写一个示例页面来引入我们需要的包:
<!-- index.html --> <!doctype> <head> <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="libs/animate.css/animate.min.css"> <script src="libs/jquery/jquery.min.js"></script> <script src="libs/bootstrap/dist/js/bootstrap.min.js"></script> <script src="libs/angular/angular.min.js"></script> </head> ...
Bower可以通过.bowerrc
文件进行配置,它是一个JSON文件,你可以直接在项目的根目录创建该文件,通过该文件我们可以指定bower的依赖安装目录,网关服务器,超时连接等配置信息,该文件的详细配置参数的说明见链接页面。内容如下:
{ "directory": "bower_components", "analytics": false, "timeout": 120000, "registry": { "search": [ "http://localhost:8000", "https://bower.herokuapp.com" ] } }
这里请参考链接。