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

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

本文重点如下：

1. 一张图理解 包管理器 的发展史。
2. npm是什么，如何从众人诟病到翻身做客人？
3. npx是什么，它解决了什么问题
4. cnpm是什么，它解决了什么问题
5. yarn是什么，它的劣势
6. 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 版本更新日程：

1. npm@v1.0.0 首次公布 –2010 年
2. npm@v3.0.0 node_modules 目录构造扁平化 –2015 年 06 月
3. npm@4.0.0 package-lock.json 前身 npm-shrinkwrap.json 用于依赖锁定 –2016 年 10 月
4. npm@v5.0.0 package-lock.json 默认生成，并兼容 npm-shrinkwrap.json，重构 npm-cache，大大晋升下载速度 –2017 年 05 月
5. npm@v5.2.0 npx 命令公布 –2017 年 07 月
6. 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 比拟大的劣势：

1. 反对离线装置（npm@5已反对）
2. 依赖扁平化构造（npm@3已反对）
3. 依赖装置确定性yarn.lock（npm@5 减少了package-lock.json）
4. 装置速度快并行下载
5. 装置失败主动重试

6. 等等 …

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

   pnpm也是一个包管理器，它奇妙的应用了相似于 linux 的软连贯形式，达到一个模块文件多处服用，解决了 yarn、npm 在多个我的项目装置同一个依赖时会下载反复文件的问题，防止磁盘的节约，同时大大晋升下载速度。

上面是 pnpm 的一些特点：

1. pnpm运行起来十分的快，超过了 npm 和yarn。
2. pnpm采纳了一种奇妙的办法，利用硬链接和符号链接来防止复制所有本地缓存源文件。也就是说多个我的项目雷同的依赖只会在某处装置一次，连贯过去间接应用，节俭了安装时间和瓷盘空间。
3. pnpm继承了 yarn 和新版 npm 的所有长处，包含离线模式和确定性装置。

4. 然而链接在一些场景下会存在兼容的问题，例如Electron 利用无奈应用 pnpm、部署在 lambda 上的利用无奈应用 pnpm

   总结

5. npm是一个包管理器，不便开发者分享和下载开源包。经验了许多重大版本的更新，各方面曾经和yar n 在同一程度。
6. npx是 npm@5.2 的产物，不便运行本地命令
7. cnpm是不便中国开发者下载依赖包而诞生的下载器。
8. yarn解决了 npm@5 之前的一些让人诟病的问题，同时领有一些其它的长处。例如离线装置、失败主动重试装置和并行下载等。

9. pnpm通过连贯的形式，让多个我的项目的依赖专用同一个包，大大节俭了磁盘空间，比 yarn 和npm下载速度快得多，然而也有连贯带来的各种兼容问题。

   从集体角度来说，应用 npm、yarn、pnpm 都是能够的，然而最好是团队都应用同一个管理器。

以上。

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

往期精彩

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

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