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

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

1. npm

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

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

  • npmnode.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. 小结

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