首先,这两个都属于js包管理工具,都可以安装包或者模块
yarn 是由facebook、google等联合开发推出的
区别:

npm 下载包的话 比如npm install
它是按照包的排序,也就是队列挨个下载,一个下载完成后,再下载另一个
yarn是将要下载的包进行同时下载
yarn 在下载模块或包时,命令行输出的信息更加简洁
npm版本5.0 之后,会自带package.lock.json 文件,该文件主要描述了你项目中安装的包都是哪一个版本,你再进行npm install 的话,会安装指定版本的包。
yarn 一直都有lock 文件,功能和npm 的package.lock.json差不多。
命令不同
npm install == yarn
npm isntall vue == yarn add vue
npm uninstall vue == yarn remove vue
npm update == yarn upgrade

按照以往,我的步骤都是:

git clone xxx
npm install
npm run dev

这时,JJ给我来了下面一段

git clone xxx
yarn
yarn start

“咦,yarn是什么鬼?难道npm更高级的替代品?为什么要替代npm?难道有什么好的地方?”,内心一连串的问题冒出来。我就默默的问了一下JJ:“yarn是跟npm一样的东西吗?”,“嗯。”JJ忙碌的敲着键盘,显然这个问题不值得继续问下去了。我也默默的把刚才脑子里一连串的问题记了下来。

Yarn是什么?

“Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,正如官方文档中写的,Yarn 是为了弥补 npm 的一些缺陷而出现的。”这句话让我想起了使用npm时的坑了:

  • npm install的时候巨慢。特别是新的项目拉下来要等半天,删除node_modules,重新install的时候依旧如此。
  • 同一个项目,安装的时候无法保持一致性。由于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的优势及其解决的问题。

Yarn的优点?

  • 速度快。速度快主要来自以下两个方面:
  1. 并行安装:无论 npm 还是 Yarn 在执行包的安装时,都会执行一系列任务。npm 是按照队列执行每个 package,也就是说必须要等到当前 package 安装完成之后,才能继续后面的安装。而 Yarn 是同步执行所有任务,提高了性能。
  2. 离线模式:如果之前已经安装过一个软件包,用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 <package> 的时候,命令行里会不断地打印出所有被安装上的依赖。相比之下,Yarn 简洁太多:默认情况下,结合了 emoji直观且直接地打印出必要的信息,也提供了一些命令供开发者查询额外的安装信息。
  • 多注册来源处理:所有的依赖包,不管他被不同的库间接关联引用多少次,安装这个包时,只会从一个注册来源去装,要么是 npm 要么是 bower, 防止出现混乱不一致。
  • 更好的语义化: yarn改变了一些npm命令的名称,比如 yarn add/remove,感觉上比 npm 原本的 install/uninstall 要更清晰。

Yarn和npm命令对比

npm yarn
npm install yarn
npm install react --save yarn add react
npm uninstall react --save yarn remove react
npm install react --save-dev yarn add react --dev
npm update --save yarn upgrade

npm的未来:npm5.0

有了yarn的压力之后,npm做了一些类似的改进。

  1. 默认新增了类似yarn.lock的 package-lock.json;
  2. git 依赖支持优化:这个特性在需要安装大量内部项目(例如在没有自建源的内网开发),或需要使用某些依赖的未发布版本时很有用。在这之前可能需要使用指定 commit_id 的方式来控制版本。
  3. 文件依赖优化:在之前的版本,如果将本地目录作为依赖来安装,将会把文件目录作为副本拷贝到 node_modules 中。而在 npm5 中,将改为使用创建 symlinks 的方式来实现(使用本地 tarball 包除外),而不再执行文件拷贝。这将会提升安装速度。目前yarn还不支持。

总结

在npm5.0之前,yarn的优势特别明显。但是在npm之后,通过以上一系列对比,我们可以看到 npm5 在速度和使用上确实有了很大提升,值得尝试,不过还没有超过yarn。

综上我个人的建议是如果你已经在个人项目上使用 yarn,并且没有遇到更多问题,目前完全可以继续使用。但如果有兼容 npm 的场景,或者身处在使用 npm,cnpm,tnpm 的团队,以及还没有切到 yarn 的项目,那现在就可以试一试 npm5 了。

参考文章

原文:https://blog.csdn.net/weixin_39458031/article/details/86254375
原文链接:https://www.jianshu.com/p/254794d5e741

npm和yarn的区别,我们该如何选择?的更多相关文章

  1. npm和yarn的区别

    npm和yarn的区别,我们该如何选择? 周一入职,同事JJ让我熟悉一下基于React的新项目.按照以往,我的步骤都是: git clone xxx npm install npm run dev 这 ...

  2. 一文看懂npm、yarn、pnpm之间的区别

    文作者对比了当前主流的包管理工具npm.yarn.pnpm之间的区别,并提出了合适的使用建议,以下为译文: NPM npm是Node.js能够如此成功的主要原因之一.npm团队做了很多的工作,以确保n ...

  3. [转] 一文看懂npm、yarn、pnpm之间的区别

    [From] http://geek.csdn.net/news/detail/197339 原文:Understanding differences between npm, yarn and pn ...

  4. 主流包管理工具npm、yarn、cnpm、pnpm之间的区别与联系——原理篇

    接触 node 之后,一直使用npm包管理工具, cnpm 一开始会用一些,但是并没有觉得比 npm 快得多,使用 cnpm 的时候还经常安装不成功,只能再用 npm 安装一遍,渐渐的就弃用了 cnp ...

  5. npm npx cnpm yarn 的区别

    npm npm 是 Node.js 官方提供的包管理工具.用于 Node.js 包的发布.传播.依赖控制.npm 提供了命令行工具,使你可以方便地下载.安装.升级.删除包,也可以让你作为开发者发布并维 ...

  6. Npm vs Yarn 之备忘大全

    有则笑话,如此讲到:"老丈人爱吃核桃,昨天买了二斤陪妻子送去,老丈人年轻时练过武,用手一拍核桃就碎了,笑着对我说:你还用锤子,你看我用手就成.我嘴一抽,来了句:人和动物最大的区别就是人会使用 ...

  7. npm 还是 yarn ?

    技术选型时这个问题总是困扰我,今天看到一篇文章,详细的解释了 npm 和 yarn 在性能,安全,支持性和使用难易度上的区别,看完之后这个问题终于有一个答案: 如果你在意速度和 UI,选 yarn,如 ...

  8. 包管理工具(npm、yarn)

    npm包管理工具 1. npm的包安装分为本地安装(local).全局安装(global)两种,从敲的命令行来看,差别只是有没有-g而已. 2. 这两种安装方式的区别: 本地安装(安装在命令行运行所在 ...

  9. npm和yarn使用

    npm和yarn使用 他们都属于js包管理工具,都可以安装包或者模块yarn 是由facebook.google等联合开发推出的 区别: npm 下载包的话 比如npm install,它是按照包的排 ...

随机推荐

  1. js移动端自适应动态设置html的fontsize

    JS设计移动端页面时会遇到自适应问题,大多数都知道用rem来设置页面的比例大小,下面就来说几种常见的html中的fontsize设置方法: 1.使用flexible.js插件库.  淘宝就是利用这个来 ...

  2. pymongo和mongoengine安装和使用教程 包含常用命令行和代码示例 | pymongo and mongoengine tutorial on ubuntu 16.04

    本文首发于个人博客https://kezunlin.me/post/e88f04e5/,欢迎阅读最新内容! pymongo and mongoengine tutorial on ubuntu 16. ...

  3. 从零开始学 ASP.NET Core 与 EntityFramework Core 目录

    从零开始学 ASP.NET Core 与 EntityFramework Core 介绍 我是一个目录,它旨在帮助开发者循序渐进的了解 ASP.NET Core 和 Entity Framework ...

  4. Web前端基础(3):HTML(三)

    1. body中的相关标签 1.1 表格标签:table.tr.td HTML表格由<table>标签以及一个或多个<tr>.<th>或<td>标签组成 ...

  5. linux上文件挂载的案例

    cat /etc/fstab 将172.20.20.117上的172.20.20.117:/data/nfs/zichan/目录挂载到172.20.20.112机器上,其实类似目录共享 在需要挂载的机 ...

  6. 重启电脑 wamp图标是橙色(未变绿)

    记录一个错误: 修复系统漏洞后,重启电脑,wamp没有开机自启动,手动启动后发现,图标是大红色变成了橙色,也就是服务未完全启动(1/2)状态. ??? 但是我其实也不知道是哪个服务(Apache/My ...

  7. Mysql—事务原理与详解

    事务的四大特性 事务的隔离级别 https://www.cnblogs.com/57rongjielong/p/8036418.html https://blog.csdn.net/zwq123211 ...

  8. PHP转Go系列:数组与切片

    数组的定义 用过PHP的同学应该很清楚,无论多么复杂的数据格式都可以用数组来表达,什么类型的数据都可以往里塞,它是工作必备的一部分,使用很简单,易用程度简直变态. $array = [1, 'name ...

  9. 安全类和远程类shell脚本

    批量杀php小马脚本 find /home/hatdot/ -name "*.php" |xargs egrep "phpspy|c99sh|milw0rm|eval\( ...

  10. 15.Java基础_初探对象

    package pack1; public class Phone { //成员变量 String brand; int price; //成员方法 public void call(){ Syste ...