Yarn 和 npm 评测对比，如何混合使用?
wxin55 2024-11-08 14:39 11 浏览 0 评论
前言：
在之前的文章中，给大家简单介绍了yarn的基本概念和命令使用方法。我们说，yarn是一个非常具有竞争力的依赖管理工具。甚至最近几年，它的热度一度超过传统工具npm。它简洁的日志输出方式，依赖管理方案，以及下载速度，都给开发者带来了非常棒的体验。下面我给大家用实际开发场景测试一下，具体说明yarn的优势。
1. 待测试命令
通过以上待测试命令，我们可以看到：
- 相同功能的命令，yarn的命令更加简洁，且更加语义化。
- yarn的全局安装使用 global 命令，但是yarn本身并不希望我们全局安装某些包，更希望我们每一个项目单独去管理依赖及版本。全局安装某些包后，如果需要删除模块，用 yarn global remove 就好，如果需要清除缓存，用 yarn cache clean 。
- 如npm run 等很多命令，我们可以直接替换成yarn run，降低了学习记忆成本。
2. 命令运行效果
为了方便大家看到测试运行效果，我们简单做了前期准备，使用vue cli初始化了一个项目，在相同的环境相同的网速情况下安装一些依赖。
先介绍一下我们项目 package.json 里的配置项
首先，我们使用npm来安装这些依赖：
然后，我们删除 node_modules 文件夹中已经安装好的依赖，使用yarn重新安装一遍。
总结：通过以上测试，我们可以明显的看出，同样的安装依赖，使用yarn 安装的log输出，页面简洁内容详细，而npm相比之下就逊色了很多。并且最重要的，yarn的速度优势体现的淋漓精致，比npm的速度快了几倍。这只是在依赖很少的项目中就可以看出速度对比，在我们日常开发的大型前端项目框架中，yarn的速度优势会更加明显。
npm 和 yarn混合使用
在平时的开发中，尤其是一些相对较老的项目，我们是通常是使用npm来初始化项目的。那现在我们想使用yarn，是不是就要重新搭建环境，或者改动很多配置呢？答案是no，我们不需要做什么改动，因为它们都遵循着同一个配置文件 package.json 的规范，我们可以直接在npm的基础上使用yarn，也能完美运行，下面，用实际项目证明我们的观点。
同样还是使用上文中的配置项。
然后我们使用npm来初始化项目，安装基础依赖。
安装完成后我们的项目就多了一个 node_modules 文件夹，里面就是我们用npm安装的所有依赖。
接下来，我们使用 yarn ,在npm安装的依赖基础上再追加一个新的依赖包 elementUI
安装成功！说明安装是没问题的，然后我们再尝试使用 yarn 卸载 npm 安装的依赖。
删除成功，说明 yarn 可以完美适配 npm 的项目，我们可以将原有的npm项目平滑的过渡到yarn项目，非常的方便。
相比npm，yarn在安装过程中的优势
- 离线模式：yarn会有一个缓存目录，会缓存以前安装过的软件包，再次安装时就不必从网络下载了，大大加速安装速度。
- 性能优化：下载软件时会自动优化请求顺序，使安装效率更高。
- 网络回弹：yarn在某个安装包请求失败时不会导致安装失败，它会自动去尝试重新安装。而npm则会毫不犹豫的失败，导致得再来一次，耗费时间
小结
通过以上测评，相信大家已经感受到了yarn的优势，希望在日常开发中，大家有机会可以多尝试多总结，提高我们的开发效率和体验。
相关推荐
- ES6中 Promise的使用场景?（es6promise用法例子）
-
一、介绍Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码doSomething(f...
- JavaScript 对 Promise 并发的处理方法
-
Promise对象代表一个未来的值，它有三种状态：pending待定，这是Promise的初始状态，它可能成功，也可能失败，前途未卜fulfilled已完成，这是一种成功的状态，此时可以获取...
- Promise的九大方法（promise的实例方法）
-
1、promise.resolv静态方法Promise.resolve(value)可以认为是newPromise方法的语法糖,比如Promise.resolve(42)可以认为是以下代码的语...
- 360前端一面~面试题解析（360前端开发面试题）
-
1.组件库按需加载怎么做的，具体打包配了什么-按需加载实现：借助打包工具（如Webpack的require.context或ES模块动态导入），在使用组件时才引入对应的代码。例如在V...
- 前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?
-
Promise的finally方法是一个非常有用的工具，它无论Promise是成功（fulfilled）还是失败（rejected）都会执行，且不改变Promise的最终结果。它的实现原...
- 最简单手写Promise，30行代码理解Promise核心原理和发布订阅模式
-
看了全网手写Promise的，大部分对于新手还是比较难理解的，其中几个比较难的点：状态还未改变时通过发布订阅模式去收集事件实例化的时候通过调用构造函数里传出来的方法去修改类里面的状态，这个叫Re...
- 前端分享-Promise可以中途取消啦（promise可以取消吗）
-
传统Promise就像一台需要手动组装的设备，每次使用都要重新接线。而Promise.withResolvers的出现，相当于给开发者发了一个智能遥控器，可以随时随地控制异步操作。它解决了三大...
- 手写 Promise（手写输入法 中文）
-
前言都2020年了，Promise大家肯定都在用了，但是估计很多人对其原理还是一知半解，今天就让我们一起实现一个符合PromiseA+规范的Promise。附PromiseA+规范地址...
- 什么是 Promise.allSettled()!新手老手都要会?
-
Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的pr...
- 前端面试-关于Promise解析与高频面试题示范
-
Promise是啥，直接上图：Promise就是处理异步函数的API，它可以包裹一个异步函数，在异步函数完成时抛出完成状态，让代码结束远古时无限回掉的窘境。配合async/await语法糖，可...
- 宇宙厂:为什么前端离不开 Promise.withResolvers() ?
-
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发。1.为什么需要Promise.with...
- Promise 新增了一个超实用的 API!
-
在JavaScript的世界里，Promise一直是处理异步操作的神器。而现在，随着ES2025的发布，Promise又迎来了一个超实用的新成员——Promise.try()！这个新方法简...
- 一次搞懂 Promise 异步处理（promise 异步顺序执行）
-
PromisePromise就像这个词的表面意识一样，表示一种承诺、许诺，会在后面给出一个结果，成功或者失败。现在已经成为了主流的异步编程的操作方式，写进了标准里面。状态Promise有且仅有...
- Promise 核心机制详解（promise机制的实现原理）
-
一、Promise的核心状态机Promise本质上是一个状态机，其行为由内部状态严格管控。每个Promise实例在创建时处于Pending（等待）状态，此时异步操作尚未完成。当异步操作成功...
- javascript——Promise（js实现promise）
-
1.PromiseES6开始支持，Promise对象用于一个异步操作的最终完成（包括成功和失败）及结果值的表示。简单说就是处理异步请求的。之所以叫Promise，就是我承诺，如果成功则怎么处理，失败怎...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- ES6中 Promise的使用场景?（es6promise用法例子）
- JavaScript 对 Promise 并发的处理方法
- Promise的九大方法（promise的实例方法）
- 360前端一面~面试题解析（360前端开发面试题）
- 前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?
- 最简单手写Promise，30行代码理解Promise核心原理和发布订阅模式
- 前端分享-Promise可以中途取消啦（promise可以取消吗）
- 手写 Promise（手写输入法 中文）
- 什么是 Promise.allSettled()!新手老手都要会?
- 前端面试-关于Promise解析与高频面试题示范
- 标签列表
-
- hive行转列函数 (63)
- sourcemap文件是什么 (54)
- display none 隐藏后怎么显示 (56)
- 共享锁和排他锁的区别 (51)
- httpservletrequest 获取参数 (64)
- jstl包 (64)
- qsharedmemory (50)
- watch computed (53)
- java中switch (68)
- date.now (55)
- git-bash (56)
- 盒子垂直居中 (68)
- npm是什么命令 (62)
- python中+=代表什么 (70)
- fsimage (51)
- nginx break (61)
- mysql分区表的优缺点 (53)
- centos7切换到图形界面 (55)
- 前端深拷贝 (62)
- kmp模式匹配算法 (57)
- jsjson字符串转json对象 (53)
- jdbc connection (61)
- javascript字符串转换为数字 (54)
- mybatis 使用 (73)
- 安装mysql数据库 (55)