前端构建实践01：用 Bower 管理前端依赖

在《前端构建实践》系列中，我准备探讨在前端开发中遇到的若干个问题，然后尝试提供一些方法为这些问题给出解决方案。请注意：作者本人正试图从前端领域的游击队员转为正规军，因此这个系列事实上十分浅显甚至有所疏误，（并且不能如标题所暗示的，可直接用于实践之中）如果文章有任何错误，望专业人士不吝赐教。

---

一个情境

试想在一个传统的前端开发模式中，开发者想在他的 HTML 页面中使用 jQuery，他需要：

1. 打开 jQuery 的官方网站。
2. 寻找下载链接。
3. 选取自己希望的 jQuery 版本。
4. 点击下载。
5. 将下载的库文件放入正确的目录下。
6. 最后，在 HTML 中引用 jQuery 库。

这还是简化的情况。真实的情况会更复杂更令人头大，在实际的项目中，你可能会有大量的依赖需要进行手工管理，这导致了下面两个问题：

1. 依赖管理：我使用的库文件对其他库有什么样的依赖？我要阅读文档，然后把这些依赖一并加入到项目中。
2. 版本管理：问题 1 导致了若干个版本管理的问题。如果库 1 和库 2 都依赖于库 3，但库 1 和库 2 所依赖的库 3 版本号不一致，我得如何处理？如果更不幸，这两个不一致的版本是不兼容的，我又该怎么办？另外，如果库文件有更新，我得重做检查依赖、获取最新文件这些繁复的动作。而且，如果库文件更新的版本有问题，我得回退这些操作。

解决方案：Bower

类似于 Java 生态环境的 Maven，.NET 世界的 NuGet，Bower 也是一个包管理工具，但主要目的是前端开发的资源管理：JavaScript、CSS、HTML、图像或字体。依托于 Node.js，Bower 试图像那些优秀的后端包管理工具那样，解决前端开发中的依赖问题。

Bower 正是为包管理而生的。只要给 Bower 一个指令，告诉它要安装什么包，它都会帮你做好：下载包和对应的依赖、检测版本冲突。

安装 Bower

Bower 需要用到 Node.js 和 Git，所以你需要先安装 Node.js 和 Git。

安装完 Node.js 和 Git 后，试试它是否正常运行：

（在下面的代码块中，>后的内容表示在命令行中输入的命令，下一行则是该命令对应的输出）

> node -vv4.4.3> npm -v2.15.1> git --versiongit version 2.7.1.windows.2

之后开始安装 Bower。不需要去什么网站下载，通过npm安装即可。

> npm install bower -g

参数-g表示 Node.js npm 全局安装。

安装后测试：

> bower -v1.7.9

初始化 Bower 环境

尽管可以用 Bower 直接开始，但我们还是先为开发环境配置下 Node.js，因为后面我们将使用其他依附于 Node.js 的构建工具。

创建一个空的目录，作为我们的项目主目录。在命令行中导航到这个目录，然后输入命令初始化 Node.js 项目。

> npm init

此时 npm 会给出一个交互式的界面，按照提示输入对应的内容即可。完成后，将会在主目录下创建一个package.json文件。

接下来，我们初始化 Bower 环境。

> bower init

和npm init类似，bower init也会提示你输入一些信息来创建一个名为bower.json的文件，这是管理整个 Bower 的前端资源的重要文件。（Javaer 们可以将其功能视为与 Maven 的pom.xml等同。）

动手实践：使用 Bower 查找、安装、卸载、还原包

查找包

不清楚自己要安装的包在 Bower 上有没有？试试bower search：

bower search <package_name>

例如，我要查找 Bootstrap：

> bower search bootstrap

Bower 列出了下面的搜索结果。

Search results:    bootstrap https://github.com/twbs/bootstrap.git    bootstrap-bo https://github.com/brentoneill/bootstrap.git    x-bootstrap https://github.com/x-element/x-bootstrap.git    hg-bootstrap https://github.com/HackerGaucho/hg-bootstrap.git    bem-bootstrap https://github.com/matmuchrapna/bem-bootstrap.git    boost-bootstrap https://github.com/cristiangrojas/boost-bootstrap.git    bootstrap-dv https://github.com/JKAussieSkater/Bootstrap-DV.git    ui.bootstrap https://github.com/angular-ui/bootstrap.git    mk-bootstrap https://github.com/geometrybase/mk-bootstrap.git    bootstrap.ui https://github.com/visionappscz/bootstrap-ui.git    dd-bootstrap https://github.com/DeloitteDigitalUK/DDBootstrap.git    bootstrap-pi https://github.com/guilhermegeek/bootstrap-pi.git    nr-bootstrap https://github.com/artbelov/nr-bootstrap.git    ui-bootstrap https://github.com/angular-ui/bootstrap.git    bootstrap-cc https://github.com/chibicode/bootstrap-cc.git    bootstrap-ui https://github.com/angular-ui/bootstrap.git    bootstrap-ie https://github.com/ddouble/bsie.git    bootstrap-tl https://github.com/tomatolabs/bootstrap.git    ng-bootstrap https://github.com/ifgroup/ng-bootstrap.git    cd-bootstrap https://github.com/jairorudas/cd-bootstrap.git    vue-bootstrap https://github.com/demohi/vue-bootstrap.git    xui-bootstrap https://github.com/spxis/xui-bootstrap.git    ng2-bootstrap https://github.com/valor-software/ng2-bootstrap.git    bootstrap.css https://github.com/bowerjs/bootstrap.git    mnd-bootstrap https://github.com/mynewsdesk/mnd-bootstrap.git    bootstrap-tag https://github.com/gammasoft/bootstrap-tag.git    bootstrap-bower https://github.com/diegotoral/bootstrap-bower.git    xdf-bootstrap https://github.com/xdfcn/bootstrap.git    geo-bootstrap https://github.com/divshot/geo-bootstrap.git    bootstrap-ulg https://github.com/magdev/bootstrap-ulg.git

找到了要安装的包后，我们可以查看包的详细信息（依赖、可用版本等）

> bower info bootstrap

安装包

现在我想要安装 Bootstrap。

> bower install bootstrap --save

Bower 会检测到 Bootstrap 依赖于 jQuery，于是首先下载安装了 jQuery。

bower bootstrap#*               cached https://github.com/twbs/bootstrap.git#3.3.6bower bootstrap#*             validate 3.3.6 against https://github.com/twbs/bootstrap.git#*bower jquery#1.9.1 - 2      not-cached https://github.com/jquery/jquery-dist.git#1.9.1 - 2bower jquery#1.9.1 - 2         resolve https://github.com/jquery/jquery-dist.git#1.9.1 - 2bower jquery#1.9.1 - 2        checkout 2.2.4bower jquery#1.9.1 - 2        resolved https://github.com/jquery/jquery-dist.git#2.2.4bower bootstrap#^3.3.6         install bootstrap#3.3.6bower jquery#1.9.1 - 2         install jquery#2.2.4bootstrap#3.3.6 bower_components\bootstrap└── jquery#2.2.4jquery#2.2.4 bower_components\jquery

你将在项目目录下看到一个 bower_components 文件夹，里面是bootstrap和jquery两个文件夹，Bower 默认将所有的依赖都放到这个文件夹内。

同时，打开bower.json文件，你会看到 JSON 根对象上多了个dependencies节点：

"dependencies": {    "bootstrap": "^3.3.6"}

这是--save参数的功劳：它将你安装的包作为当前项目的依赖持久化了下来。

如果不想使用最新版本的 Bower 包，可以指定包的版本：

> bower install <package#version>

version表示一个 semver（语义化版本），可以是具体的版本号（例如1.3.7），也可以表示为一个版本号范围（例如~1.2或^1.2.3）。

例如：

> bower install jquery.cookie#1.4.0

卸载包

通过bower uninstall <package_name>卸载 Bower 包。

例如，我要卸载已经安装的jquery.cookie包：

> bower uninstall jquery.cookie --save

和install类似，可选参数--save将指定的依赖从bower.json中移除。

还原包

现在我们将bower_components文件夹删除。

执行下面的指令：

> bower install

过一会儿，你会发现bower_components文件夹又出现了，该有的依赖也回来了。奥妙就在于 Bower 从bower.json文件读取当前项目的依赖，然后自动地下载并安装缺失的依赖。

了解更多 bower 命令

通过 bower help 获取帮助。

用法:    bower <命令> [<参数>] [<选项>]命令:    cache                   管理 bower 缓存    help                    显示 Bower 帮助信息    home                    在浏览器中打开包主页    info                    显示包信息    init                    交互式创建 bower.json 文件    install                 在本地安装包    link                    为包文件夹创建符号链接    list                    列出本地的包 - 以及可能的更新    login                   GitHub 验证并保存凭证    lookup                  根据名称查找包 URL    prune                   移除本地的无用包    register                注册包    search                  按名称搜索包    update                  更新本地包    uninstall               移除本地包    unregister              取消注册包    version                 显示包版本选项:    -f, --force             为一些命令加上强制性    -j, --json              输出 JSON    -l, --loglevel          要展示的日志级别    -o, --offline           离线模式    -q, --quiet             只输出重要信息    -s, --silent            不输出任何信息，也包括错误    -V, --verbose           详细输出    --allow-root            允许用 root 运行命令    -v, --version           输出 Bower 版本    --no-color              禁用颜色输出用 'bower help <命令>' 获取特定命令的帮助。

bower.json

实际上，不需要任何 bower 命令，只要创建一个bower.json清单文件，就能构建一个 bower 项目。然后通过运行bower install来安装清单指定的依赖。bower.json是一个 JSON 文件，dependencies节点是最重要的节点，它包含的是对当前项目的依赖信息。dependencies节点是个对象，其中对象的键是依赖包的名称（例如jquery），值则是依赖包的版本或 Git URL。

本文只简单介绍 Bower，有关bower.json文件的更多信息，可以参看bower.json规范。

Bower 带来的问题

如果你仔细观察 Bower 在bower_components文件夹中创建的内容，它包含了太多东西：源文件（src）、分发包（dist）、许可（licence）等等。“然而我只想要最有用的那个分发包啊。”Bower 的哲学就是这样，它只负责帮你安装和管理依赖，至于你如何使用，Bower 才不关心呢。所以现在，Bower 为我们安装了依赖，但并不适合直接使用（bower_components文件夹是 Bower 包管理文件夹，它可以被删除后通过install命令恢复，一些源代码管理工具也会忽略这个文件夹，因此开发时最好不要链接到这个文件夹中的任何资源）。怎么办？下一篇，我将使用另外一个工具以解决这个让人烦恼的问题。