Bower包管理工具的使用

本文主要介绍前端开发中常用的包管理工具Bower，具体包括Bower的基本情况、安装、使用和常见命令等内容，最后还介绍了依赖树管理的常见方式以及Bower采用的策略并进行了比较。

1.1 关于Bower

Bower是一款优秀的包管理器，它由Twitter公司开发，支持以命令行的方式来对包进行搜索、下载、更新和卸载。

模块或组件指独立完整的模块，可以是应用的一部分或者是扩展，依赖可以是jQuery或backbone这样的库，也可以像Bootstrap这样的UI框架或者是UI组件。

包英文（package）模块或组件的另一种叫法。

依赖一个模块为了满足独立完整原则所必须的其他模块，依赖提供了这个模块所需要的功能，如果没有这个功能，那么这个组件就无法工作。例如我们认为jQuery-ui这个组件依赖于jQuery。

Bower的优点

❑ 专为前端开发设计，几乎所有的主流前端库都可以使用该工具。

❑ 约束松散，使用简单。

❑ 依赖树扁平更适合Web应用开发。

官网参考：https://bower.io/

1.2 Bower的安装

在安装bower之前，必须确认你已经安装了Node.js和Git。

安装Bower

使用npm来安装Bower，-g表示全局安装

查看Bower版本

Bower安装完成后就能在命令行中直接使用bower命令了，可以通过下面的命令行来查看当前的版本。

或者是

查看帮助信息

使用help命令来查看帮助信息。

1.3 Bower的使用

初始化操作

在桌面创建新的文件夹，用来演示Bower的使用。先使用命令行进入到文件夹路径，然后使用下面的命令来对Bower进行初始化操作。

根据提示来交互式的设置基本项，初始化操作完成之后，会在文件夹的根目录中创建一个bower.json文件，里面包含一些基本信息。

安装指定的包

尝试执行下面的命令行，来把jQuery框架安装到当前项目中。

命令行中的save参数会把包记录保存到bower.json文件中，install命令会把jQuery框架下载到bower_components目录中，该目录文件是保存所有组件和依赖的地方。当执行install命令的时候，Bower会从仓库中获取到jQuery组件的信息然后和bower.json文件中的信息进行比较，如果jQuery没有安装，那么就会默认安装最新版本，如果已经安装了，则bower会自动停止并提示。

具体的执行情况如下：

命令执行完毕后，Bower会在根目录下生成bower_components文件夹，并把下载好的包（jQuery框架）放在这个文件夹里面。此时目录结构如下：

查看bower.json文件会发现，此时更新了包和对应的版本信息

Bower在执行安装操作的时候，主要做了如下操作：

① 检查项目目录中的bower.json文件，以确定包是否已经安装了。

② 如果指定的包没有安装，那么Bower就会检查Bower仓库中是否存在名称对应的包

③ 如果Bower仓库中存在指定的包，那么就下载最新版本到本地

④ 把下载好的包的文件添加到项目目录中，并且更新bower.json文件(包名和版本)

1.4 Bower的常见命令

安装指定包

想要下载安装的包可以是GitHub上的短链接、.git 、一个URL路径等。

搜索指定的包

如果我们在使用框架或者是框架插件的时候，记不住或者是不确定包的名字，则可以尝试先通过关键字搜索，bower会列出包含关键字的所有可用包。

安装包的指定版本

Bower通过#号来确定需要下载的版本，如果没有指定版本，则Bower自动帮我们下载最新的。所以，如果需要下载特定版本的包，可以在安装命令中使用#号来声明。

如果要安装指定的版本，也可以先在bower.json文件中对dependencies选项进行配置，然后执行或者是命令。

查看已安装的包

具体的执行情况如下

可以查看项目中当前下载过的包，并提供最新版本号。

可以查看当前下载过的所有包在项目中的对应路径，在其它工具中需要声明/配置前端依赖包地址的时候该命令可能会比较有用。

卸载指定的包

卸载本地项目中已经安装的jQuery框架。

更新指定的包

更新包的过程和安装包的过程差不多，区别在于更新的时候会使用新文件替换旧文件，上面的命令强制安装最新版本的jQuery框架。

查看指定包的详细信息

通过info指令可以查看指定包的详情，还指令会列出对应的git仓库地址，以及所有可用的版本。

1.5 Bower安装有依赖的包

通常当我们使用Bower命令()来安装指定包的时候，Bower会查找包对应的git仓库地址然后下载到本地并在bower.json文件中记录版本等信息。但有的包在使用的时候可能存在依赖关系，比如ember这个包需要依赖于jQuery框架。

使用Bower安装有依赖包的两种方式

❑ 先安装该包的依赖项（这里为jQuery），再安装指定的包（这里为ember）

❑ 直接安装（这里为ember）

方式 ①

先安装依赖,再安装指定包

方式 ②

直接安装指定包,会自动安装依赖(推荐)

列出项目中已经安装的所有包和依赖关系

该命令行在安装ember包的时候，发现需要依赖于jQuery框架，就会自动下载对应版本的jQuery框架并安装到本地项目中。

1.6 依赖树管理

组件(包)并非总是相互独立的，有些组件(包)在使用的时候需要依赖于另外一些组件(包)，就像上文提到的ember需要依赖于jQuery，jQuery-ui需要依赖于jQuery一样，我们尝试使用下面的图示来描述这种关系。

上面的图示揭示了包（组件）与包（组件）之间的依赖关系，非常简单容易理解。在实际中，每个组件可能都有多个依赖，而这些依赖自己可能还有别的依赖，或者多个不同组件都依赖于某个指定的组件，因此在处理的时候可能会非常复杂。为了理清楚这复杂的关系，依赖管理工具会把所有的依赖构成一颗（依赖树）。

依赖树主要有三种

❑ 嵌套依赖树

❑ 扁平依赖树

❑ 混合依赖树

注意：在构造依赖树的时候，组件（包）必须要有唯一的标识，该标识由组件的名称和版本号构成，也就是说jQuery1.7.3和jQuery3.3.1是两个不同的组件。

嵌套依赖树

：每个组件各自都有自己的依赖，而不会共用一个依赖。

：项目中会产生同一组件的多个副本，且可能有多个版本的组件共存比较混乱。

扁平依赖树

：保证每个组件在项目只有一个版本，没有任何其它的副本。

：容易产生冲突，如果两个组件需要同一个依赖的不同版本，就会导致出错，必须要用户自己来解决冲突，决定具体使用哪个依赖并解决潜在的不一致性。

混合依赖树

：使用最高效的办法来管理一个组件的不同版本。

：混合依赖树是扁平依赖树和嵌套依赖树的折中方案，如果一个组件的依赖已经安装了，而且版本也兼容，那么就不必再次下载安装，只要指向已安装的那个组件即可，如果版本不兼容的话，则下载安装并版本兼容的组件。

1.7 Bower依赖树管理和冲突处理

Bower作为专为前端开发者设计的依赖管理工具，是完全基于扁平依赖树的。上文介绍了扁平依赖树在处理的时候要求保证每个组件在项目只有一个版本，没有任何其它的副本，优缺参半。那既然如此，Bower为什么不使用更高效的混合依赖树？

Bower采用扁平依赖树管理的原因

（1）代码体积对于前端开发非常重要，而扁平树管理可以实现组件最(少)小化。

（2）所有组件默认都在浏览器的全局作用域中运行，不同版本的同名组件会产生冲突。

因为Bower采用了扁平依赖树的方式来处理，所以在使用的时候容易产生冲突，这种依赖管理方式要求开发者注重组件的版本兼容和依赖关系。接下来，我们简单演示Bower使用过程中会出现冲突的情况。

冲突的产生和处理

① 安装jQuery框架的1.2.3版本

执行情况

② 安装ember组件并解决冲突

$ bower install --save ember

具体的执行情况

：我们先把jQuery的1.2.3版本安装到了项目中，然后又通过Bower来安装ember，而ember组件需要依赖于jQuery框架，这里有个关键信息就是和本地已经安装的jQuery 1.2.3冲突，Bower并不会自己处理这个问题而是抛出一个异常，把选择权交给用户，由用户来选择使用哪种方案。

③ 查看项目已安装的组件信息

具体的组件和依赖结构

冲突处理完后，项目中原本下载安装好的jQuery1.2.3版本被重新下载的3.3.1版本替代。

1.8 Bower自定义组件目录

默认情况下，所有的依赖包都被下载保存到bower_components文件路径，如果想要把依赖包下载到自己指定的目录，使用.bowerrc文件配合bower.json就可以实现。

在项目根目录创建.bowerrc文件，使用json格式来设置文件路径。

保存好以后，执行bower install命令，就会把bower.json配置好的相关组件全部下载到指定的路径中。

命令行参考