前端核心工具：yrn、npm、cnpm三者如何优雅的在一起使用 ？(2)

yarn 和 npm 对比

• npm 的缺点汇总：同一个项目，安装的时候无法保持一致性。由于package.json文件中版本号的特点，下面三个版本号在安装的时候代表不同的含义。

"5.0.3", 
   "~5.0.3", 
   "^5.0.3" 

• “5.0.3”表示安装指定的5.0.3版本，“～5.0.3”表示安装5.0.X中最新的版本，“^5.0.3”表示安装5.X.X中最新的版本。这就麻烦了，常常会出现同一个项目，有的同事是OK的，有的同事会由于安装的版本不一致出现bug。
• 安装的时候，包会在同一时间下载和安装，中途某个时候，一个包抛出了一个错误，但是npm会继续下载和安装包。因为npm会把所有的日志输出到终端，有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉，并且你甚至永远不会注意到实际发生的错误。

yarn 的优点

• 速度快 。速度快主要来自以下两个方面：
• 并行安装：无论 npm 还是Yarn在执行包的安装时，都会执行一系列任务。npm是按照队列执行每个package，也就是说必须要等到当前package安装完成之后，才能继续后面的安装。而 Yarn 是并行执行所有任务，提高了性能。

离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。

• 安装版本统一：为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file)记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建(或更新)yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。npm 其实也有办法实现处处使用相同版本的 packages，但需要开发者执行 npm shrinkwrap命令。这个命令将会生成一个锁定文件，在执行 npm install的时候，该锁定文件会先被读取，和 Yarn 读取 yarn.lock 文件一个道理。npm 和 Yarn 两者的不同之处在于，Yarn 默认会生成这样的锁定文件，而 npm 要通过 shrinkwrap 命令生成 npm-shrinkwrap.json 文件，只有当这个文件存在的时候，packages版本信息才会被记录和更新。
• 更简洁的输出：npm的输出信息比较冗长。在执行npm install 的时候，命令行里会不断地打印出所有被安装上的依赖。相比之下，Yarn 简洁太多：默认情况下，结合了emoji直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息。
• 多注册来源处理：所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是 npm 要么是 bower, 防止出现混乱不一致。
• 更好的语义化： yarn改变了一些npm命令的名称，比如 yarn add/remove，感觉上比npm原本的 install/uninstall 要更清晰。

那不是标题党? 说了yarn这么多优点，我们为什么还要npm呢?

你不用npm publish ，你怎么上传包到npm? 你不用cnpm，是下载不了一些包的

搞清楚三者下载包(依赖)的本质结果：

• 首先向对应的node_module文件夹下面下载包(如果你非要下到全局，那么再见)
• 再然后是json文件中添加对应的依赖字段,确定是线上依赖还是开发依赖
• 只要做到这两者 你就下包成功
• 总结就是 只要结果 过程管你是啥

使用yarn下载过的包，再使用npm cnpm下载 会重复下载，删除之前的包

• puppeteer这个包所依赖的mini版谷歌浏览器使用cnpm下载就可以完美解决
• prerender-spa-plugin这个包依赖上面的木偶戏 puppeteer这个包，也可以用cnpm下载
• 混合使用包管理器切记，不要重复下载依赖，npm cnpm下载依赖，一定要添加注明是什么依赖，是否全局安装
• yarn和npm i两者，选择前者，原因在上面有提到，总体来说，yarn是不二选择，但是其他两者也不可缺少，比如electron这个依赖，使用cnpm就可以完美一键安装

References

• [1] 手写优化版React脚手架: https://segmentfault.com/a/1190000019126657
• [2] 手写Vue的脚手架: https://segmentfault.com/a/1190000019207033
• [3] 前端性能优化不完全手册: https://segmentfault.com/a/1190000018827395

（编辑：ASP站长网）