Bower:客户端库管理工具

来自《JavaScript 标准参考教程(alpha)》,by 阮一峰

目录

概述

随着网页功能变得越来越复杂,同一张网页加载多个JavaScript函数库早已是家常便饭。开发者越来越需要一个工具,对浏览器端的各种库进行管理,比如搜索、自动安装\卸载、检查更新、确保依赖关系等等。Bower就是为了解决这个问题而诞生的针对浏览器端的库管理工具。

Bower基于node.js,所以安装之前,必须先确保已安装node.js。

$ sudo npm install bower --global

运行上面的命令以后,Bower就已经安装在你的系统中了。运行帮助命令,查看Bower是否安装成功。

$ bower help

下面的命令可以更新或卸载Bower。

# 更新
$ sudo npm update -g bower # 卸载
$ sudo npm uninstall --global bower

常用操作

项目初始化

在项目根目录下,运行下面的命令,进行初始化。

$ bower init

通过回答几个问题,就会自动生成bower.json文件。这是项目的配置文件,下面是一个例子。

{
"name": "app-name",
"version": "0.1.0",
"main": ["path/to/app.html", "path/to/app.css", "path/to/app.js"],
"ignore": [".jshintrc","**/*.txt"],
"dependencies": {
"sass-bootstrap": "~3.0.0",
"modernizr": "~2.6.2",
"jquery": "latests"
},
"devDependencies": {"qunit": ">1.11.0"}
}

有了bower.json文件以后,就可以用bower install命令,一下子安装所有库。

$ bower install

bower.json文件存放在库的根目录下,它的作用是(1)保存项目的库信息,供项目安装时使用,(2)向Bower.com提交你的库,该网站会读取bower.json,列入在线索引。

$ bower register <my-package-name> <git-endpoint>

# 实例:在 bower.com 登记jquery
$ bower register jquery git://github.com/jquery/jquery

注意,如果你的库与现有的库重名,就会提交失败。

库的安装

bower install命令用于安装某个库,需要指明库的名字。

$ bower install backbone

Bower会使用库的名字,去在线索引中搜索该库的网址。某些情况下,如果一个库很新(或者你不想使用默认网址),可能需要我们手动指定该库的网址。

$ bower install git://github.com/documentcloud/backbone.git
$ bower install http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js
$ bower install ./some/path/relative/to/this/directory/backbone.js

上面的命令说明,指定的网址可以是github地址、http网址、本地文件。

默认情况下,会安装该库的最新版本,但是也可以手动指定版本号。

$ bower install jquery-ui#1.10.1

上面的命令指定安装jquery-ui的1.10.1版。

如果某个库依赖另一个库,安装时默认将所依赖的库一起安装。比如,jquery-ui依赖jquery,安装时会连jquery一起安装。

安装后的库默认存放在项目的bower_components子目录,如果要指定其他位置,可在.bowerrc文件的directory属性设置。

库的搜索和查看

bower search命令用于使用关键字,从在线索引中搜索相关库。

bower search jquery

上面命令会得到下面这样的结果。

Search results:

    jquery git://github.com/components/jquery.git
jquery-ui git://github.com/components/jqueryui
jquery.cookie git://github.com/carhartl/jquery-cookie.git
jquery-placeholder git://github.com/mathiasbynens/jquery-placeholder.git
jquery-file-upload git://github.com/blueimp/jQuery-File-Upload.git
jasmine-jquery git://github.com/velesin/jasmine-jquery
jquery.ui git://github.com/jquery/jquery-ui.git
...

bower info命令用于查看某个库的详细信息。

bower info jquery-ui

查看结果会列出该库的依赖关系(dependencies),以及可以得到的版本(Available versions)。

库的更新和卸载

bower update用于更新一个库,将其更新为最新版本。

$ bower update jquery-ui

如果不给出库名,则更新所有库。

bower uninstall命令用于卸载指定的库。

$ bower uninstall jquery-ui

注意,默认情况下会连所依赖的库一起卸载。比如,jquery-ui依赖jquery,卸载时会连jquery一起卸载,除非还有别的库依赖jquery。

列出所有库

bower list或bower ls命令,用于列出项目所使用的所有库。

Bower list
Bower ls

配置文件.bowerrc

项目根目录下(也可以放在用户的主目录下)的.bowerrc文件是Bower的配置文件,它大概像下面这样。

{
"directory" : "components",
"json" : "bower.json",
"endpoint" : "https://Bower.herokuapp.com",
"searchpath" : "",
"shorthand_resolver" : ""
}

其中的属性含义如下。

  • directory:存放库文件的子目录名。
  • json:描述各个库的json文件名。
  • endpoint:在线索引的网址,用来搜索各种库。
  • searchpath:一个数组,储存备选的在线索引网址。如果某个库在endpoint中找不到,则继续搜索该属性指定的网址,通常用于放置某些不公开的库。
  • shorthand_resolver:定义各个库名称简写形式。

相关链接

Bower 使用的更多相关文章

  1. ASP.NET Core 静态文件及JS包管理器(npm, Bower)的使用

    在 ASP.NET Core 中添加静态文件 虽然ASP.NET主要大都做着后端的事情,但前端的一些静态文件也是很重要的.在ASP.NET Core中要启用静态文件,需要Microsoft.AspNe ...

  2. "bower.json 中出现语法错误" 的解决方案之一

    当你用 Visual Studio 2015 Update 3 打开从别处下载的开源项目的时候,如果发现 Bower 提示 "bower.json 中出现语法错误". 请检查一下. ...

  3. Windows环境下的NodeJS+NPM+Bower安装配置

    npm作为一个NodeJS的模块管理,之前我由于没有系统地看资料所以导致安装配置模块的时候走了一大段弯路,所以现在很有必要列出来记录下.我们要先配置npm的全局模块的存放路径以及cache的路径,例如 ...

  4. 【NodeJs环境下bower】如何更改bower_components文件夹的位置

    bower在初始化,默认是将bower_components文件夹放到项目的根目录下,若是public/index.html如何配置bower_components下的js或者css类库呢?只需要将b ...

  5. node、npm、gulp、bower、ionic下载及安装

    node: http://nodejs.cn/ npm: 随node一起安装了 gulp: http://www.gulpjs.com.cn/docs/getting-started/ bower: ...

  6. Mac安装Bower

    1.安装bower,得首先安装node: brew install npm //npm是nodejs的程序包管理器,如果安装过nodejs,可忽略此步. 2.安装Git(因为需要从Git仓库获取一些代 ...

  7. Bower是什么?

    一.简介 Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其它一些建立在Bower基础之上的开发工具,如YeoMan和Grun ...

  8. Angular+Grunt+Bower+Karma+Protractor (Atom)

    1. 配置bower 1.安装bower npm install -g bower 2.创建.bowerrc文件 { "directory": "src/bower&qu ...

  9. js的包管理工具bower安装

    bower需要:node 和 git node安装包下载:http://blog.csdn.net/myan/article/details/2028545 Git安装: 选择第二项:Use Git ...

  10. 【转】前端工程筹建NodeJs+gulp+bower

    转自:http://www.myexception.cn/javascript/1781968.html npm nodejs 安装过程中会自动安装npm,nodejs安装程序会在环境变量中添加两个变 ...

随机推荐

  1. hihocoder1618 单词接龙

    #1618 : 单词接龙 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个单词字典和一个起始字母.小Hi需要从起始字母开始,每次再加上一个字母,生成长度为2.3. ...

  2. AngularX Http服务总结

    自己经常用的方式: 1.首先看httpModule Angular2的http访问经常采用两种方式: 共同点:导入相应的Module import {Http, RequestOptions, Res ...

  3. 通过Excel生成批量SQL语句,处理大量数据的好办法

    我们经常会遇到这样的要求:用户给发过来一些数据,要我们直接给存放到数据库里面,有的是Insert,有的是Update等等,少量的数据我们可以采取最原始的办法,也就是在SQL里面用Insert into ...

  4. 常用ES6语法

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. C#读取Excel数据操作大全

    苦丁茶 发表于 2014-02-10 12:58:00 | 分类标签: ASP.NET 读取Excel 本文介绍下,用C#读取excel数据的例子,包括读取整个工作薄的数据.读取工作薄选定区域中的数据 ...

  6. .net SMTP 发送邮件

    using System.Net.Mail; public static bool SendMail(string messTo,string messBody) { MailMessage mess ...

  7. (转)Android DiskLruCache完全解析,硬盘缓存的最佳方案

    摘自:http://blog.csdn.net/guolin_blog/article/details/28863651 转载请注明出处: http://blog.csdn.net/guolin_bl ...

  8. JSONUtils的几个常用方法

    1.首先新建1个JSONUtils类 public class JSONUtils { /** * * @author wangwei JSON工具类 * @param * */ /*** * 将Li ...

  9. FU-A 分包

    FU-A分包方式,以及从RTP包里面得到H.264数据和AAC数据的方法 [原创] RFC3984是H.264的baseline码流在RTP方式下传输的规范,这里只讨论FU-A分包方式,以及从RTP包 ...

  10. mac 第一次安装mysql 5.7.12 不知道root 密码的解决办法

    搞了2个晚上,这个必须记录一下 1.    先从系统偏好设置里 把 mysql 停掉 2.    打开mac 命令行工具,sudo su 以管理员身份运行命令 3.    cd /usr/local/ ...