大家好，我是猫小白，本文持续输入前端混同知识点系列第三问。致力于夯实根底、毁灭含糊知识点。
往期【混同常识】传送门：

一问：module.exports、exports、export都是导出，有何区别？
二问：都2022年了你可晓得强制缓存、协商缓存？

本文重点如下：

一张图理解包管理器的发展史。
npm是什么，如何从众人诟病到翻身做客人？
npx是什么，它解决了什么问题
cnpm是什么，它解决了什么问题
yarn是什么，它的劣势
pnpm是什么，它的劣势

在前端开发这些年，我发现包管理工具也是挺卷的。刚学前端那会儿对于一个菜鸟的我来说，npm学会npm install曾经是挺不容易了，前面又冒出什么cnpm、yarn。15年还只会写html+jquery的我来说，这些是简直用不到的，所以基本没在关怀的。随着node和前端框架vue、react、angular、webpack等技术的衰亡，包管理器就成为了每个前端程序猿的必备技能。

那这些公司或团队为什么花那么多心理开发出yarn、cnpm、pnpm这写新的包管理器呢？其实在每个人开发的过程中，都会遇到包下载慢、依赖不同导致各种bug等等问提，其实这些工具就是去解决这些问题的。

咱们辨别这些工具/下载器之前，看一张工夫过程图，理解各个工具是什么时候诞生的。

工夫过程图

图中能够清晰的看到：

2010年npm诞生第一版
时隔4年的2014年cnpm诞生
2015年npm公布v3版，改掉了v2版本嵌套目录问题，将依赖扁平化
其实2016年pnpm就曾经诞生，只是性能还不齐全，不被人熟知
2016年npm@4和yarn同年同月公布，此时的yarn轰动一时，赢来公众青睐，yarn各指标远超npm@4
隔半年的2017年5月npm@5版本公布，各项性能晋升。像是参考了一波yarn，差距放大。
2017年7月npm@5.2公布，npx命令诞生
2018年5月npm@6公布，性能晋升、npm init <pkg>命令

npm是什么，如何从众人诟病到翻身做客人

这个不必过多废话，大家十分相熟。总的来说就是一个开源、收费的包管理器。便于咱们下载和分享资源。
cnpm、yarn、pnpm等工具都是基于npm包管理器的一些变种。解决了晚期npm的一些毛病，例如下载速度慢，不能离线下载等。
npx是npm@5.2版本的一个命令。下一节会独自说到
次要的npm版本更新日程：

npm@v1.0.0 首次公布--2010年
npm@v3.0.0 node_modules目录构造扁平化 --2015年06月
npm@4.0.0 package-lock.json前身npm-shrinkwrap.json用于依赖锁定--2016年10月
npm@v5.0.0 package-lock.json默认生成，并兼容npm-shrinkwrap.json，重构npm-cache，大大晋升下载速度 --2017年05月
npm@v5.2.0 npx命令公布 --2017年07月
npm@v6.0.0 减少npm init <pkg> --2018年05月

npx是什么，它解决了什么问题

npx是npm5.2版本新增的一个命令，如果npm版本没到v5.2，请运行npm install -g npx

能够运行本地的模块

例如在vue我的项目中，想运行本地的 vue-cli-service serve 如果间接在命令行运行会报错：找不到命令

所以咱们通常这样：

package.json中：

//....其它配置"scripts": {    "dev": "vue-cli-service serve", }, //....其它配置

而后：

npm run dev

然而当初，通过npx能够这样：

npx cli-service serve

运行胜利：

npx方便使用一次就抛弃的状况，不会全局装置

例如create-react-app，以往咱们须要装置全局的包。然而应用一次前面简直就不怎么应用了，十分节约磁盘空间。当初咱们能够用npx create-react-app myapp，用完就删，真香！

如果第一次应用这个命令，npx会下载create-react-app放在临时文件中，过一段时间会主动革除，留神不会立刻革除，我测试发现第二次运行npx create-react-app myapp不会从新下载，它会从缓存中获取。

还有其它好用的性能

npx能够下载指定的版本，能够指定node版本运行等请参考阮一峰老师的npx介绍，全面易懂

npm init和npx类似

在npm@6版本中，减少了一个新命令npm init <pkg>

这两个命令是等价的：

npm init react-app myapp

npx create-react-app myapp

npm init <pkg>对与create结尾的脚手架制订了一个非凡命令，例如create-react-app、create-esm。npm init 下载时会默认对装置的pkg包增加create前缀，同时像npx一样不会全局装置，只是运行一次，前面会删除。

但npm init <pkg>不能齐全取代npx，例如运行npm init http-server 本意是想一次性启动一个本地服务后果报错:

途中能够看到http-server被变成了create-http-server，所以就找不到该模块，举荐用npx就好，至多应用起来更可控。

yarn是什么，它解决了什么问题

yarn也是一个包管理器，它和npm其实没有本质区别，都是治理和安装包的。只是它解决了晚期npm的一些问题比方：不反对离线模式、树形构造的依赖、依赖装置不确定性等。为什么说是晚期？因为npm新版本基本上曾经解决了本身的老毛病，两者没有设想中那么大的区别。

从最新版的npm和yarn来看，他们的装置速度和应用体验并没有多大的差距，yarn稍胜一筹。
装置：

npm install -g yarn

安装包：

yarn add [package]

删除包：

yarn remove [package]

yarn相当于npm劣势（晚期）：

这里列出一些晚期的yarn绝对于npm比拟大的劣势：

反对离线装置（npm@5已反对）
依赖扁平化构造（npm@3已反对）
依赖装置确定性yarn.lock（npm@5减少了package-lock.json）
装置速度快并行下载
装置失败主动重试
等等...
pnpm是什么，它解决了什么问题
pnpm也是一个包管理器，它奇妙的应用了相似于linux的软连贯形式，达到一个模块文件多处服用，解决了yarn、npm在多个我的项目装置同一个依赖时会下载反复文件的问题，防止磁盘的节约，同时大大晋升下载速度。

上面是pnpm的一些特点：

pnpm运行起来十分的快，超过了npm和yarn。
pnpm采纳了一种奇妙的办法，利用硬链接和符号链接来防止复制所有本地缓存源文件。也就是说多个我的项目雷同的依赖只会在某处装置一次，连贯过去间接应用，节俭了安装时间和瓷盘空间。
pnpm继承了yarn和新版npm的所有长处，包含离线模式和确定性装置。
然而链接在一些场景下会存在兼容的问题，例如Electron 利用无奈应用 pnpm、部署在 lambda 上的利用无奈应用 pnpm
总结
npm是一个包管理器，不便开发者分享和下载开源包。经验了许多重大版本的更新，各方面曾经和yarn在同一程度。
npx是npm@5.2的产物，不便运行本地命令
cnpm是不便中国开发者下载依赖包而诞生的下载器。
yarn解决了npm@5之前的一些让人诟病的问题，同时领有一些其它的长处。例如离线装置、失败主动重试装置和并行下载等。
pnpm通过连贯的形式，让多个我的项目的依赖专用同一个包，大大节俭了磁盘空间，比yarn和npm下载速度快得多，然而也有连贯带来的各种兼容问题。
从集体角度来说，应用npm、yarn、pnpm都是能够的，然而最好是团队都应用同一个管理器。

以上。

肯请各位大佬,不要忘了给我点赞、评论、珍藏 。

往期精彩

1. 【混同系列】一问：module.exports、exports、export都是导出，有何区别？

1. 【混同系列】二问：都2022年了你可晓得强制缓存、协商缓存？