• home > webfront > ECMAS > npm-node >

    再谈yarn与npm的优缺点对比—见证npm如何逐渐壮大

    Author:zhoulujun Date:

    npm,cnpm,yarn,npm + npm-check + npx,见证了 npm 社区的一步步发展。npm是围绕着语义版本控制(semver)的思想而设计的,刚刚推出缺点蛮多,让我们舍npm选yarn,随着npm功能完善,npm+npx又是第一选择

    npm,cnpm,yarn,npm + npm-check + npx,见证了 npm 社区的一步步发展。对比yarn与npm的优缺点对比,分析npm的缺陷以及在哪个版本上进行改进,让npm+npx重回一线

    Yarn是什么?

    于2016年10月为了弥补 npm 的一些缺陷,由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具Yarn 。维护人员包括Sebastian McKenzie(Babel.js)、Yehuda Katz(Ember.js、Rust、Bundler等)等大佬。

    Yarn一开始的主要目标是解决你npm由于语义版本控制而导致的安装包版本的不确定性问题与安装速度慢等问题而生。

    npm缺陷

    • npm install的时候巨慢,无缓存:特别是新的项目拉下来要等半天,删除node_modules,重新install的时候依旧如此

    • 目录嵌套层级过深: npm3 以前是树种目录结构,npm3开始扁平化,会将所有模块都安装到 node_modules下。

    • 无法定位错误位置:安装的时候。包会在同一时间下载和安装,中途某个时候,一个包抛出了一个错误,但是npm会继续下载和安装包。因为npm会把所有的日志输出到终端,有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉,并且你甚至永远不会注意到实际发生的错误。

    • 无法保证版本一致:因为npm是围绕着语义版本控制(semver)的思想而设计的,版本格式如下:主版本号.次版本号.补丁版本号。npm5以前,npm只能锁定大版本,也就是版本号的第一位。npm5后才有package-lock.json

      • “5.0.3”表示安装指定的5.0.3版本,

      • “~5.0.3”表示安装5.0.X中最新的版本,

      • “^5.0.3”表示安装5.X.X中最新的版本。

    备注:

    • 主版本号: 当API发生改变,并与之前的版本不兼容的时候

    • 次版本号: 当增加了功能,但是向后兼容的时候

    • 补丁版本号: 当做了向后兼容的缺陷修复的时候

    为什么要使用yarn

    yarn,则是完全碾压npm的存在~yarn不但速度甩npm十条街,而且很多npm死活安装不上的时候,yarn基本都是一次完美成功安装

    Yarn的优点

    速度快 。速度快主要来自以下两个方面:

    • 速度快 。速度快主要来自以下两个方面:

      • 并行安装:无论 npm 还是 Yarn 在执行包的安装时,都会执行一系列任务。npm 是按照队列执行每个 package,也就是说必须要等到当前 package 安装完成之后,才能继续后面的安装。而 Yarn 是同步执行所有任务,提高了性能。

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

    • 安装版本统一:为了防止拉取到不同的版本,Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块,Yarn 就会创建(或更新)yarn.lock 这个文件。这么做就保证了,每一次拉取同一个项目依赖时,使用的都是一样的模块版本npm5后也有package-lock.json,用来锁定安装时的包的版本号yarn默认情况安装会保存到 dependencies,不需要像 npm5以前需要加 -S 参数

    • 更简洁的输出:npm 的输出信息比较冗长。在执行 npm install <package> 的时候,命令行里会不断地打印出所有被安装上的依赖。相比之下,Yarn 简洁太多:默认情况下,结合了 emoji直观且直接地打印出必要的信息,也提供了一些命令供开发者查询额外的安装信息。

    • 多注册来源处理:所有的依赖包,不管他被不同的库间接关联引用多少次,安装这个包时,只会从一个注册来源去装,要么是 npm 要么是 bower, 防止出现混乱不一致。

    • 更好的语义化: yarn改变了一些npm命令的名称,比如 yarn add/remove,感觉上比 npm 原本的 install/uninstall 要更清晰。

    • 全局模块的管理。npm 管理全局模块的方式是通过直接在 /usr/lib/node_modules 下面安装,然后通过软连接连接到 /usr/local/bin 目录下。而 yarn 的做法是选择一个目录,这个目录就是全局模块安装的地方,然后将所有的全局模块当做一个项目,从而进行管理。这个好处就是,你可以直接备份这个目录当中的 package.json 和 yarn.lock 文件,从而可以很方便的在另一个地方还原你安装了那些全局模块。至于这个目录的问题,通过 yarn global dir 命令就可以找到,mac 下是在 ~/.config/yarn/global/,linux 我没有测试过。

    • 提供了非常简洁的命令

      • 将相关的命令进行分组,比如说 yarn global 下面都是与全局模块相关的命令。而且提示非常完全,一眼就能看明白是什么意思。不会像 npm 一样,npm --help 就是一坨字符串,还不讲解一下是什么用处,看着头疼。

      • 非常方便的 yarn run 命令,不仅仅会自动查看 package.json 中 scripts 下面的内容,还是查找 node_modules/.bin 下的可执行文件。这个是我用 yarn 最高的频率。比如你安装了 yarn add mocha,然后就可以通过 yarn run mocha 直接运行 mocha。而不需要 ./node_modules/.bin/mocha 运行。是我最喜欢的一个功能

      • 交互式的版本依赖更新。npm 你只能先通过 npm outdated 看看那些包需要更新,然后通过 npm update [packages] 更新指定的包。而在 yarn 当中,可以通过交互式的方式,来选择那些需要更新,那些不需要。


    Yarn和npm命令对比



    npmyarn
    npm installyarn
    npm install react --saveyarn add react
    npm uninstall react --saveyarn remove react
    npm install react --save-devyarn add react --dev
    npm update --saveyarn upgrade


    npm5以后,我就基本不用yarn了,npm6以后,结合npx,还是npm香,而且是原生的。

    参考文章:

    yarn和npm的对比以及yarn的使用 https://www.cnblogs.com/yanghj/p/11526022.html

    npm和yarn的区别,我们该如何选择? https://www.jianshu.com/p/254794d5e741

    为什么我从 npm 到 yarn 再到 npm? https://blog.xgheaven.com/2018/05/03/npm-to-yarn-to-npm/

    一文看懂npm、yarn、pnpm之间的区别 https://zhuanlan.zhihu.com/p/37653878



    转载本站文章《再谈yarn与npm的优缺点对比—见证npm如何逐渐壮大》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/nodejs/8308.html