前端主流依赖管理工具简介
前言:大家好,很高兴和大家又见面啦!之前得几个小节,主要给大家介绍了 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. 小结
近几年前端发展的越来越快,相关的工具也越来越多。关于项目中具体选用哪种依赖管理工具,是由项目本身的特点,结合我们自身的使用经验去决定的。作为开发者,希望大家可以多了解一些工具的使用方法和特性,到时候真正使用的时候才会得心应手。
- 还没有人评论,欢迎说说您的想法!