百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

Yarn 和 npm 评测对比,如何混合使用?

ztj100 2024-11-07 13:40 48 浏览 0 评论



前言:

在之前的文章中,给大家简单介绍了yarn的基本概念和命令使用方法。我们说,yarn是一个非常具有竞争力的依赖管理工具。甚至最近几年,它的热度一度超过传统工具npm。它简洁的日志输出方式,依赖管理方案,以及下载速度,都给开发者带来了非常棒的体验。下面我给大家用实际开发场景测试一下,具体说明yarn的优势。

1. 待测试命令


通过以上待测试命令,我们可以看到:

  1. 相同功能的命令,yarn的命令更加简洁,且更加语义化。
  2. yarn的全局安装使用 global 命令,但是yarn本身并不希望我们全局安装某些包,更希望我们每一个项目单独去管理依赖及版本。全局安装某些包后,如果需要删除模块,用 yarn global remove 就好,如果需要清除缓存,用 yarn cache clean
  3. 如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的优势,希望在日常开发中,大家有机会可以多尝试多总结,提高我们的开发效率和体验。

相关推荐

离谱!写了5年Vue,还不会自动化测试?

前言大家好,我是倔强青铜三。是一名热情的软件工程师,我热衷于分享和传播IT技术,致力于通过我的知识和技能推动技术交流与创新,欢迎关注我,微信公众号:倔强青铜三。Playwright是一个功能强大的端到...

package.json 与 package-lock.json 的关系

模块化开发在前端越来越流行,使用node和npm可以很方便的下载管理项目所需的依赖模块。package.json用来描述项目及项目所依赖的模块信息。那package-lock.json和...

Github 标星35k 的 SpringBoot整合acvtiviti开源分享,看完献上膝盖

前言activiti是目前比较流行的工作流框架,但是activiti学起来还是费劲,还是有点难度的,如何整合在线编辑器,如何和业务表单绑定,如何和系统权限绑定,这些问题都是要考虑到的,不是说纯粹的把a...

Vue3 + TypeScript 前端研发模板仓库

我们把这个Vue3+TypeScript前端研发模板仓库的初始化脚本一次性补全到可直接运行的状态,包括:完整的目录结构所有配置文件研发规范文档示例功能模块(ExampleFeature)...

Vue 2迁移Vue 3:从响应式到性能优化

小伙伴们注意啦!Vue2已经在2023年底正式停止维护,再不升级就要面临安全漏洞没人管的风险啦!而且Vue3带来的性能提升可不是一点点——渲染速度快40%,内存占用少一半,更新速度直接翻倍!还在...

VUE学习笔记:声明式渲染详解,对比WEB与VUE

声明式渲染是指使用简洁的模板语法,声明式的方式将数据渲染进DOM系统。声明式是相对于编程式而言,声明式是面向对象的,告诉框架做什么,具体操作由框架完成。编程式是面向过程思想,需要手动编写代码完成具...

苏州web前端培训班, 苏州哪里有web前端工程师培训

前端+HTML5德学习内容:第一阶段:前端页面重构:PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局;第二阶段:高级程序设计:原生交互功能开发、面向对象开发与ES5/ES6、工具库...

跟我一起开发微信小程序——扩展组件的代码提示补全

用户自定义代码块步骤:1.HBuilderX中工具栏:工具-代码块设置-vue代码块2.通过“1”步骤打开设置文件...

JimuReport 积木报表 v1.9.3发布,免费可视化报表

项目介绍积木报表JimuReport,是一款免费的数据可视化报表,含报表、大屏和仪表盘,像搭建积木一样完全在线设计!功能涵盖:数据报表、打印设计、图表报表、门户设计、大屏设计等!...

软开企服开源的无忧企业文档(V2.1.3)产品说明书

目录1....

一款面向 AI 的下一代富文本编辑器,已开源

简介AiEditor是一个面向AI的下一代富文本编辑器。开箱即用、支持所有前端框架、支持Markdown书写模式什么是AiEditor?AiEditor是一个面向AI的下一代富文本编辑...

玩转Markdown(2)——抽象语法树的提取与操纵

上一篇玩转Markdown——数据的分离存储与组件的原生渲染发布,转眼已经鸽了大半年了。最近在操纵mdast生成md文件的时候,心血来潮,把玩转Markdown(2)给补上了。...

DeepseekR1+ollama+dify1.0.0搭建企业/个人知识库(入门避坑版)

找了网上的视频和相关文档看了之后,可能由于版本不对或文档格式不对,很容易走弯路,看完这一章,可以让你少踩三天的坑。步骤和注意事项我一一列出来:1,前提条件是在你的电脑上已配置好ollama,dify1...

升级JDK17的理由,核心是降低GC时间

升级前后对比升级方法...

一个vsCode格式化插件_vscode格式化插件缩进量

ESlint...

取消回复欢迎 发表评论: