前端主流依赖管理工具简介

前言：大家好，很高兴和大家又见面啦！之前得几个小节，主要给大家介绍了 Yarn 的相关知识和使用技巧。我们知道，前端这个技术栈，是近几年前后端分离的这个天才思路出现后，才得以迅猛发展，在日常的开发中扮演着越来越重要的角色。前人说：工欲善其事必先利其器。前端的发展，离不开众多优秀的工具，本文将以横向对比的思路，带大家认识一下市场上主流的，跟 yarn 的地位差不多的各种依赖管理工具。

1. npm

作为前端包管理工具的开拓者，npm 就像一个里程碑一样，几经风雨仍然屹立不倒。虽然近几年，如 yarn、cnpm、pnpm 等优秀的前端依赖管理工具，如雨后春笋一般冒了出来，并且在市场上相继拥有众多开发者粉丝。但是细心的同学可以发现，他们都无法撼动 npm 的地位，npm的相关社区依旧火热。据npm的官网统计，npm 目前拥有来自世界各地开发者发布的超过 600000 个包（代码模块），每周大约有超 30亿次的下载量，其惊人的影响力可见一斑。

npm 能持续保持活力，究其原因，我认为主要有如下几点：

• npm是node.js内置的依赖管理器，现在的前端开发，离不开 node 环境，只要我们配置好 node，可以直接使用npm，其他的依赖工具，如 yarn,cnpm等其他工具，都需要使用 npm 或者其他方式间接去安装再使用，这个概念就像我们买了电脑可以直接使用 window 或者 mac系统一样方便。
• npm 首先提出了如 package.json 注册表去管理所有依赖，以及使用命令行去操作依赖更新删除等操作，非常的方便。这个思路也被后续的其他依赖管理工具纷纷效仿。
• 之前一直被开发者诟病的几点，如版本锁定，安装速度等问题，随着新版本 npm 的发布，已经有了非常明显的改观，可以说 npm5 之后，单从下载依赖速度和版本管理等方面来看，npm 已经不逊色于其他的依赖管理工具。

因为是带大家了解相关依赖管理工具的概念，并且在之前的教程中已经详细讲过 npm 的概念及命令的相关用法，在这里就不一一给大家拓展了。

使用经验：

npm 作为最早一批出现的依赖管理工具，不管你是否习惯使用它，还是喜欢用别的工具，他的基本用法大家都应该了解，这样也能让我们更快的理解别的工具的思路和用法。

2. cnpm

因为 npm 的服务器在国外，所以我们日常在使用 npm 去下载一些依赖时，经常会遇到网络原因，下载失败。或者直接有的依赖国内下载不了，需要科学上网等方式，去下载。这样相当的麻烦，让我们开发者内心倍受折磨。

于是我们国内的淘宝团队做了国内镜像，给广大开发者带来极大的便利。淘宝镜像与官方同步频率目前为 10 分钟 一次以保证尽量与官方服务同步。大家可以理解为，依赖还是之前的依赖，但是下载的地址由国外服务器转向国内，这样既提升了下载速度，又提高了下载的成功率。

cnpm 的命令使用方法和 npm 相似。
如果需要安装依赖，npm 的命令为：npm install ,cnpm 的命令则为 cnpm install

安装使用 cnpm 的方式略有不同，我们可以使用 npm 直接安装：

npm install cnpm -g --registry=https://registry.npm.taobao.org

也可以采用修改 npm 下载地址的方式，去使用 cnpm：

npm config set registry https://registry.npm.taobao.org

使用经验：

cnpm 可以被看做是更改了下载地址的 npm，优化了下载效率。但是经过开发中的实测经验，cnpm 虽然速度快，但是下载的依赖有时会出现莫名其妙的问题，导致项目出现 bug，并且非常难以解决。所以个人不推荐使用 cnpm 作为我们常用的依赖管理工具。

3. Bower

Bower 是一个小众的前端管理工具，他的使用热度没有 npm 或者 yarn那么高，但是它也属于主流的前端依赖管理工具之一，所以在这里给大家简单介绍下。

bower 和 npm 很像，就像孪生兄弟一样。npm 的依赖管理文件是 package.json ，包安装的目录是 node_modules。
bower 的依赖管理文件文件是 bower.json ，包安装的目录是 bower_components。区别是：Bower 可以自定义依赖的下载目录结构，意思是说，你在哪个文件目录打开的 bower，那么它就会在那个文件下，下载你需要的包，而 npm 就不支持这个。

它的安装方式有几种，最简单的是直接使用 npm 安装：

npm install -g bower //安装到全局环境

使用方式也和 npm 很相似，如使用 bower init -y 初始化一个目录，生成一个 bower.json 文件。如果我们想安装jquery这个依赖，执行 bower install jquery ，是不是有种很熟悉的感觉！

它生成的 bower.json 文件格式，也跟 package.json 文件差不多，具体如下：

{
  "name": "down",
  "authors": [
    "xxxxxxxx"
  ],
  "description": "",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
  ],
  "dependencies": {
    "jquery": "^2.2.2"
  }
}

使用经验：

Bower 没有npm热度那么高，但是他们的用法和思路都很相似，上手很快，大家可以作为一个拓展知识，亲自上手尝试使用一下，相信会有新的感悟和收获。

4. pnpm

pnpm 是一个比较新的依赖管理工具，它的出现，和 yarn 一样，是为了解决某些 npm 的痛点的。npm3 开始采用了扁平的依赖关系树来处理包的依赖，而现在的前端项目越来越庞大复杂，很多时候有成百上千的依赖包，每次安装包就得好等一会，而且大量浪费磁盘空间。关于这个缺陷，yarn 是使用本地缓存来优化，而 pnpm 是利用硬链接和符号链接来避免复制所有本地缓存源文件，不用每个项目复制一堆包。这就体现出了 pnpm 的优势。

pnpm的使用方法，或者说命令，也基本上和 npm一样，不过它内部重构了 npm 的一些命令，大概概括如下：

• install
• update
• uninstall
• link
• prune
• list
• install-test
• outdated
• rebuild
• root
• help

使用经验：

只需要使用 npm 去安装 pnpm，基本上所有 npm 可以用的命令，都可以使用 pnpm 去替代，这一点跟 cnpm 很相似，但是它和 cnpm 解决的不是同一个问题，这个大家要切记！

5. 小结

近几年前端发展的越来越快，相关的工具也越来越多。关于项目中具体选用哪种依赖管理工具，是由项目本身的特点，结合我们自身的使用经验去决定的。作为开发者，希望大家可以多了解一些工具的使用方法和特性，到时候真正使用的时候才会得心应手。