Bower: Client library management tool

content

Overview

As web page functions become more and more complex, loading multiple JavaScript function libraries on the same web page has long been commonplace. Developers increasingly need a tool to manage various libraries on the browser side, such as searching, automatic installation/uninstallation, checking for updates, ensuring dependencies, etc. Bower is a library management tool for browsers born to solve this problem.

Bower is based on node.js, so you must make sure you have node.js installed before installing it.

$ sudo npm install bower --global

After running the above command, Bower is already installed on your system. Run the help command to see if Bower is installed successfully.

$ bower help

The commands below can update or uninstall Bower.

# 更新
$ sudo npm update -g bower

# 卸载
$ sudo npm uninstall --global bower

Common operations

Project initialization

In the project root directory, run the following command to initialize.

$ bower init

By answering a few questions, the bower.json file is automatically generated. This is the configuration file for the project, below is an example.

{
  "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"}
}

Once you have the bower.json file, you can use the bower install command to install all the libraries at once.

$ bower install

The bower.json file is stored in the root directory of the library. Its function is to (1) save the library information of the project for use during project installation, (2) submit your library to Bower.com, and the website will read bower. json, listed in the online index.

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

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

Note that if your library has the same name as an existing library, the commit will fail.

Installation of the library

The bower install command is used to install a library, and the name of the library needs to be specified.

$ bower install backbone

Bower will use the library's name to search the online index for the library's URL. In some cases, if a library is very new (or you don't want to use the default URL), we may need to manually specify the URL for the library.

$ 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

The above command shows that the specified URL can be a github address, an http URL, or a local file.

By default, the latest version of the library is installed, but the version number can also be specified manually.

$ bower install jquery-ui#1.10.1

The above command specifies to install version 1.10.1 of jquery-ui.

If a library depends on another library, the dependent library will be installed together by default during installation. For example, jquery-ui depends on jquery, and it will be installed together with jquery during installation.

The installed library is stored in the bower_components subdirectory of the project by default. If you want to specify another location, you can set it in the directory property of the .bowerrc file.

Library search and viewing

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