首先,这两个都属于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. pytest框架之allure报告生成

    一.关于安装 allure是跟pytest一起集成使用的,所以需要同时安装pytest以及allure-pytest插件: pip install pytest pip install allure- ...

  2. Mac下如何复制webp图片

      将 WebP 格式图片拖到 Chrome 浏览器标签栏中(浏览器是肯定支持查看的,而且是 Google 自家的),这个时候图片是能够正常查看的.我们右键选中图片,选择「复制图片」. 打开 macO ...

  3. php使用inotify扩展监控文件或目录,如果发生改变,就执行指定命令

    通过inotify扩展监控文件或目录的变化,如果发生变化,就执行命令. 可以应用于 swoole 中,如果文件发生变化,就执行 kill -USR1 进程PID 来实现热更新. <?php cl ...

  4. MongoDB for OPS 04:备份恢复

    写在前面的话 和 MySQL 一样,mongodb 也是需要将数据进行备份的,毕竟天有不测风云,谁也不知道哪天机器就炸了. 备份恢复 mongodb 提供了两种备份恢复手段:mongoexport / ...

  5. oracle学习笔记(十九) 子程序——存储过程

    子程序--存储过程 我们可以使用子程序来封装一下我们需要的操作,子程序又有存储过程,函数和触发器. 这里先学习存储过程~ 语法 create [or replace] procedure $proce ...

  6. 如何访问到静态的文件,如jpg,js,css.

    如果你的DispatcherServlet拦截"*.do"这样的有后缀的URL,就不存在访问不到静态资源的问题. 如果你的DispatcherServlet拦截"/&qu ...

  7. collection(list,set,map)集合详解

    一:java集合的体系结构如下: Java集合大致分为Set.List.Queue.Map四个体系 .Collection: List和Set,Queue继承自Collection接口. |--Lis ...

  8. 什么是POSP?系统逻辑是什么?pos收单必读

    POSProxy,POS前置系统.主要用于管理前端的POS机具和交易的转发,具体功能有:   1. POS机具的密钥及下载管理:   2. 交易的合法检测和过滤:   3. 交易监控和分流:   4. ...

  9. 将vue2.9.6升级到vue3.0

    vue2.9.6没有ui界面可以用,直接使用yarn global add @cli没用,还是2.9.6版本 借鉴博客: https://juejin.im/post/5bf7d67c51882518 ...

  10. TypeScript 学习笔记(二)

    块级作用域变量: 1.不能在被声明前读或写 console.log(num); let num: number = 0; // 报错 2.仍然可以在一个拥有块级作用域的变量声明前通过函数捕获它,但不能 ...