使用Bower进行前端依赖管理

什么是Bower？

前端开发圈越来越热闹，第三方js库层出不穷，版本更迭日新月异；且许多库又对其他库有着依赖关系。而我们的页面需要的库也越来越多样化。以往需要引入第三方库，需要搜索寻找所需库的特定版本下载，还需要搜索寻找下载特定版本的依赖库，十分麻烦；库的更新也是件十分繁琐的事情。是否有一个工具：搜索、自动安装/卸载、检查更新、确保依赖关系……

Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系。

• “包”是指一系列有意义的资源的集合，在bower这里，更多体现在json文件，它是这些资源的配置文件，一个完整的包都应该有一个bower.json文件。
• “管理”包含获取，下载，安装，更新，查找,注册等等一系列对资源的操作。

npm是专门管理node模块的管理工具，而bower是node的模块，因为bower是依赖node，npm和git。正如前面所言，npm是擅长的是管理node模块，而bower管理的范围更大，涉及html,css,js和图片等媒体资源。或许，这也是人们喜欢在服务器端使用npm,而在客户端使用bower。

Bower 的基础功能有哪些？

• 注册模块：每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配
• 文件存储：把文件存储在一个有效的网络地址上,使用的时候可以直接下载到
• 上传下载：你可以把你的包注册后上传存储，使用的时候可以使用一条命令直接下载到当前项目
• 依赖分析：它帮我们解决了包与包直接的依赖关系，当我们下载一个包A的时候,由于它依赖包B,所以bower会自动帮我们下载好包B

为什么要使用Bower?

• 节省时间。为什么要学习Bower的第一个原因，就是它会为你节省寻找客户端的依赖关系的时间。每次我需要安装jQuery的时候，我都需要去jQuery网站下载包或使用CDN版本。但是有了Bower，你只需要输入一个命令，jquery就会安装在本地计算机上，你不需要去记版本号之类的东西，你也可以通过Bower的info命令去查看任意库的信息。
• 脱机工作。Bower会在用户主目录下创建一个.bower的文件夹，这个文件夹会下载所有的资源、并安装一个软件包使它们可以离线使用。如果你熟悉Java，Bower即是一个类似于现在流行的Maven构建系统的.m2仓库。每次你下载任何资源库都将被安装在两个文件夹中 —— 一个在的应用程序文件夹，另一个在用户主目录下的.bower文件夹。因此，下一次你需要这个仓库时，就会用那个用户主目录下.bower中的版本。
• 可以很容易地展现客户端的依赖关系。你可以创建一个名为json的文件，在这个文件里你可以指定所有客户端的依赖关系，任何时候你需要弄清楚你正在使用哪些库，你可以参考这个文件。
• 让升级变得简单。假设某个库的新版本发布了一个重要的安全修补程序，为了安装新版本，你只需要运行一个命令，bower会自动更新所有有关新版本的依赖关系。

如何安装Bower?

Bower依赖于Node.js，Git（资源主要通过git进行下载），因此你需要提前安装好，才能正常安装bower。 Bower可以通过NPM进行安装：

一旦你已经安装了上面所说的所有必要文件，键入以下命令安装Bower：

1	$ npm install -g bower

这行命令是Bower的全局安装，-g 操作表示全局。

2 3	–version //检查版本确认是否安装好 update //更新Bower版本 uninstall --global 卸载Bower

如何使用Bower?

安装完bower之后就可以使用所有的bower命令了。可以键入help 命令来查看bower可以完成那些操作，如下：

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

PS D:\> help Usage:     bower <command> [<args>] [<options>] Commands:     cache                   Manage cache     help                    Display information about Bower     home                    Opens a package homepage into your favorite browser     info                    Info of particular     init                    Interactively create bower.json file     install                 Install locally     link                    Symlink folder     list                    List local packages - and possible updates     login                   Authenticate with GitHub store credentials     lookup                  Look up URL by name     prune                   Removes extraneous     register                Register     search                  Search for     update                  Update     uninstall               Remove     unregister              Remove from the registry     version                 Bump version Options:     -f, --force             Makes various commands more forceful     -j, --json              Output consumable JSON     -l, --loglevel          What level logs to report     -o, --offline           Do not hit network     -q, --quiet             Only output important     -s, --silent            Do anything, besides errors     -V, --verbose           verbose     --allow-root            Allows running as root     -v, --version           Output     --no-color              Disable colors See 'bower help <command>' on specific command.

上面help 信息列出 bower 提供的命令：

• cache:bower缓存管理
• help:显示Bower命令的帮助信息
• home:通过浏览器打开一个包的github发布页
• info:查看包的信息
• init:创建json文件
• install:安装包到项目
• link:在本地bower库建立一个项目链接
• list:列出项目已安装的包
• lookup:根据包名查询包的URL
• prune:删除项目无关的包
• register:注册一个包
• search:搜索包
• update:更新项目的包
• uninstall:删除项目的包

包的安装

Bower是一个软件包管理器，举例来看一下来如何使用Bower安装JQuery，首先使用命令行将找到包存放的本地目录，然后执行：

jquery

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

Bower使用包的名字去在线索引中搜索该包的网址 — bower.com。某些情况下，如果一个库很新（或者你不想使用默认网址），可能需要我们手动指定该库的网址。指定的网址可以是 github 地址、http 网址、本地文件。

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

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

jquery-ui#1.10.1

如果某个库依赖另一个库，安装时默认将所依赖的库一起安装。Bower会根据该库的 bower.json 文件下的 dependencies 配置自动给你安装指定依赖库的指定版本。比如，jquery-ui依赖jquery，安装时会连jquery一起安装。

包的搜索

假如你想在你的应用程序中使用twitter的bootstrap框架，但你不确定包的名字，这时你可以使用search 命令：

search bootstrap Search results:     bootstrap git://github.com/twbs/bootstrap.git     angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git     bootstrap-sass-official git://github.com/twbs/bootstrap-sass.git     sass-bootstrap git://github.com/jlong/sass-bootstrap.git     bootstrap-datepicker git://github.com/eternicode/bootstrap-datepicker.git     bootstrap-select git://github.com/silviomoreto/bootstrap-select.git     angular-ui-bootstrap-bower git://github.com/angular-ui/bootstrap-bower     angular-ui-bootstrap git://github.com/angular-ui/bootstrap.git     bootstrap-daterangepicker git://github.com/dangrossman/bootstrap-daterangepicker.git     bootstrap-timepicker git://github.com/jdewit/bootstrap-timepicker     bootstrap-switch git://github.com/nostalgiaz/bootstrap-switch.git     bootstrap-css git://github.com/jozefizso/bower-bootstrap-css.git     select2-bootstrap-css git://github.com/t0m/select2-bootstrap-css.git     eonasdan-bootstrap-datetimepicker git://github.com/Eonasdan/bootstrap-datetimepicker.git     seiyria-bootstrap-slider git://github.com/seiyria/bootstrap-slider.git     angular-bootstrap-colorpicker git://github.com/buberdds/angular-bootstrap-colorpicker.git     bootstrap-multiselect git://github.com/davidstutz/bootstrap-multiselect.git     bootstrap.css git://github.com/bowerjs/bootstrap.git     bootstrap-datetimepicker git://github.com/tarruda/bootstrap-datetimepicker.git     angular-bootstrap-datetimepicker git://github.com/dalelotts/angular-bootstrap-datetimepicker     bootstrap-modal git://github.com/jschr/bootstrap-modal.git     bootstrap-tour git://github.com/sorich87/bootstrap-tour.git     bootstrap-tagsinput git://github.com/TimSchlechter/bootstrap-tagsinput.git     bootstrap-additions git://github.com/mgcrea/bootstrap-additions.git     bootstrap-file-input git://github.com/grevory/bootstrap-file-input.git     angular-bootstrap-switch git://github.com/frapontillo/angular-bootstrap-switch.git     bootstrap-social git://github.com/lipis/bootstrap-social.git     twbs-bootstrap-sass git://github.com/twbs/bootstrap-sass     ember-addons.bs_for_ember git://github.com/ember-addons/bootstrap-for-ember.git     jasny-bootstrap git://github.com/jasny/bootstrap.git

查看包的信息

如果你想看到关于特定的包的信息，可以使用info 命令来查看该包的所有信息：

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

info bootstrap#*           not-cached git://github.com/twbs/bootstrap.git#* bootstrap#*              resolve git://github.com/twbs/bootstrap.git#* bootstrap#*             download https://github.com/twbs/bootstrap/archive/v3.3.6.tar.gz progress received 0.9MB of 3.8MB downloaded, 24% progress received 1.0MB of 3.8MB downloaded, 27% progress received 1.1MB of 3.8MB downloaded, 30% progress received 1.3MB of 3.8MB downloaded, 34% progress received 1.4MB of 3.8MB downloaded, 37% progress received 1.6MB of 3.8MB downloaded, 41% progress received 1.7MB of 3.8MB downloaded, 46% progress received 1.9MB of 3.8MB downloaded, 50% progress received 2.1MB of 3.8MB downloaded, 55% progress received 2.3MB of 3.8MB downloaded, 59% progress received 2.4MB of 3.8MB downloaded, 64% progress received 2.6MB of 3.8MB downloaded, 69% progress received 2.8MB of 3.8MB downloaded, 74% progress received 3.0MB of 3.8MB downloaded, 79% progress received 3.2MB of 3.8MB downloaded, 85% progress received 3.4MB of 3.8MB downloaded, 88% progress received 3.5MB of 3.8MB downloaded, 92% progress received 3.7MB of 3.8MB downloaded, 96% bootstrap#*              extract archive.tar.gz resolved git://github.com/twbs/bootstrap.git#3.3.6 {   name: 'bootstrap',   description: 'The most popular front-end framework for developing responsive, mobile first projects on the web.',   keywords: [     'css',     'js',     'less',     'mobile-first',     'responsive',     'front-end',     'framework',     'web'   ],   homepage: 'http://getbootstrap.com',   license: 'MIT',   moduleType: 'globals',   main:     'less/bootstrap.less',     'dist/js/bootstrap.js'   ignore:     '/.*',     '_config.yml',     'CNAME',     'composer.json',     'CONTRIBUTING.md',     'docs',     'js/tests',     'test-infra'   dependencies:     jquery: '1.9.1 - 2'   },   version: '3.3.6' } Available versions:   - 3.3.6 3.3.5 3.3.4 3.3.2 3.3.1 3.3.0 3.2.0 3.1.1 3.1.0 3.0.3 3.0.2 3.0.1 3.0.0 2.3.2 2.3.1 2.3.0 2.2.2 2.2.1 2.2.0 2.1.1 2.1.0 2.0.4 2.0.3 2.0.2 2.0.1 2.0.0 1.4.0 1.3.0 1.2.0 1.1.1 1.1.0 1.0.0 Show additional prereleases ‘bower --verbose’ You can request 'bower info bootstrap#<version>'

查看指定版本包的信息：

bootstrap#3.3.6 bootstrap#3.3.6           cached git://github.com/twbs/bootstrap.git#3.3.6 bootstrap#3.3.6         validate 3.3.6 against git://github.com/twbs/bootstrap.git#3.3.6

已安装包列表

list check-new     Checking new versions project dependencies... D:\ └── jquery#2.2.0 extraneous (latest is 3.0.0-beta1)

其他常用指令

• 包的升级 bower update jquery

• 包的卸载 bower uninstall jquery （注意：默认情况下会连所依赖的库一起卸载。比如，jquery-ui

  依赖 jquery，卸载时会连 jquery 一起卸载，除非还有别的库依赖 jquery。）

• 安装失败清除缓存 bower cache clean

Bower的配置文件.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.json文件

bower.json文件的使用可以让包的安装更容易，你可以在应用程序的根目录下创建一个名为“bower.json”的文件，并定义它的依赖关系。bower.json的作用是：

• 保存项目的库信息，供项目二次安装时使用（重复使用）
• 向com 提交你的库时，该网站会读取 bower.json，列入在线索引。

其中dependencies 记录着生产环境依赖的库；devDependencies 记录着开发时依赖的 node package。其版本规则见 npm 的version rules。

使用bower init 命令可以来创建bower.json文件，它会自动提示你输入一系列的内容，以生成最终的文件，包括项目名称、作者信息、项目描述信息、关键词、开源证书等等。

init ? newone description one main newone.js what types modules does this expose? es6 keywords test authors biaodianfu <biaodianfu#gmail.com> license MIT http://www.biaodianfu.com set currently installed components dependencies? Yes add commonly ignored files ignore list? would you like mark private which prevents it being accidentally published registry? No 'newone',   authors:     'biaodianfu <biaodianfu#gmail.com>' 'a new one project', 'newone.js',     'es6'     'test' 'http://www.biaodianfu.com',     '**/.*',     'node_modules',     'bower_components',     'test',     'tests' '^2.2.0'   }

注意看，它已经加入了jQuery依赖关系。现在假设也想用twitter bootstrap，我们可以用下面的命令安装twitter bootstrap并更新bower.json文件：

--save

-save 就是把下载的包信息写入到配置文件的依赖项里，它会自动安装最新版本的bootstrap并更新bower.json文件：

"name": "newone",   "authors":     "biaodianfu <[email protected]>"   "description": "a new one project",   "main": "newone.js",   "moduleType":     "es6"   "keywords":     "test"   "license": "MIT",   "homepage": "http://www.biaodianfu.com",   "ignore":     "**/.*",     "node_modules",     "bower_components",     "test",     "tests"   "dependencies":     "jquery": "^2.2.0",     "bootstrap": "^3.3.6"

需要注意的是，这里有两个版本的依赖，一个是dependencies，另一个是devDependencies，分别代表生产环境和开发环境中的依赖包，它们可以分别通过下面两个指令自动添加：

--save         //添加到dependencies angular --save-dev        //添加到devDependencies

按照上面的做法，例如，我创建了一个前端开发的较为齐全的包，就可以挂在git或者bower的官网上了。而你要做的是，只把这个bower.jsonpush到线上即可。别人通过下载这个bower.json文件，在已经安装bower的前提下，直接运行bower install就可以使用这个前端开发包了。

将包发布到bower.com

你可以注册自己的包，这样其他人也可以使用了，这个操作只是在服务器上保存了一个映射，服务器本身不托管代码。

提交你的 bower 包给 bower.com：

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

实例：在 bower.com 登记jquery

git://github.com/jquery/jquery

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