Bower 使用

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:定义各个库名称简写形式。

相关链接

时间: 2024-10-08 08:50:30

Bower 使用的相关文章

&lt;zz&gt;bower入门教程

from http://www.cnblogs.com/xiaokai0203/p/5891927.html bower入门教程 什么是bower Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍. 准备工作 安装node环境:node.js 安装Git,bower从远程git仓库获取代码包:git简易指南 安装bower 使用

初识 bower(一)

一.前言 写给我自己看的,自己学习用的. 尼玛现在的前端越来越高端了. 二.什么是bower 首先不管他是什么鸟,总之看见了web这个单词,就知道肯定和网站有点关系. 我目前知道的是   就是bower就是解决自己动手去下载各种库,框架的问题. 三.如何安装bower bower基于node环境,所以node的环境必需要装好.没装的点这个node官网; 全局安装bower代码很简单,-g的意思是全局安装哦:   这可以看bower的版本信息. 四.使用bower下载常用的库(这里示例用的是jqu

Grunt Bower构建前端

Grunt + Bower-前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行数据交互. 对于后端服务语言来说,不论是Ruby的rake,Java中的Maven或Gradle,或是Scala中的SBT,他们都能够提供编译运行.运行测试.打包部署.依赖管理等功能.再加上强大的package系统,让它可以插拔式的使用很多强大的功能,像数据

Bower指定依赖安装目录

在项目根下创建一个名为.bowerrc 的文件然后 { "directory" : "public/components" } 再运行bower install就好啦

Bower A package manager for the web

Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.Bower is opt

bower常用命令

bower install loadash --save bower uninstall loadash --save bower init bower install loadash#2.2.1 bower info loadash  列出lodash包的bower.json文件以及其历史版本集 bower info lodash#2.2.1列出2.2.1版本的lodash bower.json文件内容,可以查看起依赖的变更 bower cache list bower cache clean

windows环境下安装npm、cnpm、bower

什么是npm.cnpm.bower? 简单地说,就是帮你下载好你需要的css或者js库,而且三者功能也都是一样的.那为什么要下载这3个不同的呢?据说npm容易被墙--而cnpm是淘宝的镜像,所以通常用cnpm代替npm.至于bower,是因为bower更多地用于前端开发.但是因为它也是依赖于npm的,所以没有npm,就没法载bower--不知道说了那么多你懂了没,但是这不重要~你所需要做的就是分别安装这3个,然后将bower为己所用. 安装npm 前往nodejs官网下载nodejs,https

bower学习总结

1. 安装软件:node-v6.10.3-x64.msi 和 Git-2.13.0-64-bit.exe 在安装git时,需要选择'Run Git from the Windows Command Prompt' 2. 安装bower:  在git bash命令行下,npm install bower -g 3. 安装软件包:在git bash命令行下, 当前目录定为到项目下面,bower install lodash   (以lodash为例),指定版本:bower install#2.2.1

bower指南(一)

安装bower npm install -g bower 新建文件1.txt,然后重命名为.bowerrc cp 1.txt .bowerrc 这个.bowerrc文件是自定义bower下载的代码包的目录: .bowerrc文件内容如下: { "directory" : "js/lib" } bower初始化 bower初始化不能在gitbash,要在cmd中: bower init 包的安装 比如要安装一个jquery,输入如下命令: bower install

自动化构建之bower

官网地址:https://bower.io/ 网站由很多东西组成 - 框架,库,一个大型网站有很多人一块创建,那么因为版本或者其他的原因导致文件重复,或者不是最新的.例如:jq的版本不一样但是都是jq.bower就是用来管理这些文件的,解决重复的组件.库,让所有的文件都是最新版本的. 下面详细介绍bower的安装到使用 1.安装bower 在终端执行 npm install -g bower 便可完成安装,安装完成之后执行 bower -v 2.创建一个测试目录 mkdir bower-in-a