大家好，我是毛小白，本文继续输出前端迷惑知识点系列第三题。致力于打好基础，剔除模糊的知识点。上一篇【知识困惑】传送门：一道题：module.exports，exports，exports都是导出的。有什么不同？第二个问题：2022年了，你知道强制缓存和协商缓存吗？本文重点如下：一张图看懂包管理器的发展历程。npm是什么，如何从被人诟病变成当家做主？npx是什么，它能解决什么问题？什么是cnpm？什么是纱线及其优点？刚学前端的时候，对于菜鸟的我来说，从npm开始学习npminstall，以及后来出现的什么cnpm和yarn，都不是一件容易的事情。对于15年只会写html+jquery的我来说，这些几乎用不到，所以根本不在乎。随着node等技术和vue、react、angular、webpack等前端框架的兴起，包管理器已经成为每个前端程序员必备的技能。那为什么这些公司或团队花这么多时间去开发像yarn、cnpm、pnpm这样新的包管理器呢？其实在开发的过程中，每个人都会遇到包下载慢、依赖不同导致的各种bug等问题。其实这些工具就是为了解决这些问题。在我们区分这些工具/下载器之前，让我们看一张时间历程图来了解每个工具是什么时候诞生的。从时间历程图中可以清楚地看到：npm第一个版本诞生于2010年，cnpm第一个版本诞生于2014年，2015年npm发布了v3版本。pnpm诞生于2016年，但功能还不完善，知名度不高。2016年，npm@4和yarn同年同月发布。这时，纱线轰动一时，深得大众喜爱。yarn每半年各项指标远超npm@4。2017年5月发布npm@5版本，完善各项功能。似乎指了一波纱线，差距缩小了。2017年7月，npm@5.2发布，npx命令诞生。2018年5月，npm@6发布，性能提升，npminit命令，什么是npm，如何从被人诟病变成大师。熟悉的。一般来说，它是一个开源和免费的包管理器。方便我们下载和共享资源。cnpm、yarn和pnpm等工具都基于npm包管理器的某些变体。解决了早期npm的一些缺点，比如下载速度慢，离线下载等。npx是npm@5.2版本的一个命令。下一节将分别说说主要的npm版本更新时间表：npm@v1.0.0首次发布-2010年npm@v3.0.0node_modules目录结构扁平化-2015年6月npm@4.0.0package-lock。json的前身npm-shrinkwrap.json用于依赖锁--2016年10月默认生成npm@v5.0.0package-lock.json并兼容npm-shrinkwrap.json，重构npm-cache，下载速度大幅提升--2017年5月，npm@v5.2.0发布npx命令--2017年7月，npm@v6.0.0新增npminit--2018年5月，npx是什么，有什么问题解决了npx是npm5.2版本新增了一条命令。如果npm版本不是v5.2，请运行npminstall-gnpx运行本地模块。比如在一个vue项目中，想要运行本地的vue-cli-serviceserve，如果直接在命令行运行，会出现Error:commandnotfound所以我们通常是这样做的：在package.json中：//...其他配置"scripts":{"dev":"vue-cli-serviceserve",},//....其他配置然后:npmrundev不过现在通过npx可以像这样：npxcli-serviceserverunssuccessful:npx方便用一次就弃，不会像create-react-app那样全局安装。过去，我们需要安装全局包。但是用过一次之后就几乎不用了，很浪费磁盘空间。现在我们可以使用npxcreate-react-appmyapp并在使用完后将其删除。太甜了！如果您是第一次使用此命令，npx将下载create-react-app并将其放入一个临时文件中。一段时间后，它会自动清除。请注意，它不会立即被清除。我测试发现第二次运行npxcreate-react-appmyapp不会重新下载，会从缓存中获取。npx还有其他一些有用的功能可以下载指定版本，可以指定运行的node版本等，具体可以参考阮一峰老师对npx的介绍。它全面且易于理解。npminit类似于npx。在npm@6版本中，新增了一个命令npm。init这两个命令是等价的：npminitreact-appmyappnpxcreate-react-appmyappnpminit有一个以create开头的脚手架专用命令，比如create-react-app,create-esm。npminit下载时，默认会在安装的pkg包中加上create前缀。同时和npx一样，不会全局安装。它只会运行一次，稍后将被删除。但是npminit并不能完全替代npx。比如运行npminithttp-server时，本意是一次性启动一个本地服务，结果报错：可以看到中途http-server已经改成了create-http-server，所以你可以找到如果你没有这个模块，建议使用npx，至少使用起来更可控。什么是纱线，它能解决什么问题？Yarn也是一个包管理器。它在本质上与npm没有区别。他们都管理和安装包。只是解决了早期npm的一些问题，比如：不支持离线模式，树状结构依赖，依赖安装不确定性等等。为什么是早期呢？因为新版本的npm已经基本解决了自身的老问题，所以两者的区别并没有想象中那么大。从npm和yarn的最新版本来看，它们的安装速度和用户体验相差不大，yarn稍微好一些。安装：npminstall-gyarn安装包：yarnadd[package]deletepackage：yarnremove[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都可以，但是团队最好用同一个manager。多于。请大家不要忘记点赞、评论、收藏我。往期花絮1.【困惑系列】一题：module.exports，exports，exports都是导出的。有什么不同？1.【困惑系列】第二个问题：都2022年了，你知道强制缓存和协商缓存吗？
