包管理工具Yarn的使用和命令总结

news2025/2/24 16:13:06

大家好,今天总结了一下Yarn这个包管理工具的使用,虽然Npm 已经奠定了前端工程基础,但是追求完美的前端程序员们又基于 Npm 不足的地方,提供了新的完善思路,针对如 Npm 安装包的速度问题,包的版本问题加以改善。所以今天我们要学习的 Yarn 就是用来解决这些问题的。

一.Yarn简介

了解前端开发的人可能会习惯于使用 npm 或者cnpm 作为我们项目的包管理工具,它们在给我们的日常开发带来便利的同时,也伴随着,如:安装慢、无法保持包的一致性等让开发者头疼的问题,于是作为npm 的直接竞争对手 Yarn 诞生了。

yarn有如下的三个优点:
速度快: Yarn 缓存了每个下载过的包,再次使用时无需重复下载。同时它是并行的,因此安装速度更快
安全: 在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。
可靠: 使用详细、简洁的锁文件格式和明确的安装算法,使 Yarn 能够在不同系统上保证无差异的工作。

可以总结出:Yarn 是基于 Npm 的不足之处做出了全新的改版升级,但是我们并不能说 Yarn 的出现会完全取代 Npm,因为目前的 Yarn ,只是完善升级了 Npm,让开发者们有了更好的体验,但截至目前为止,Yarn 并没有实现全部的 Npm 命令及功能。

Yarn 和 npm 能否同时使用?
答:可以同时使用,上文提到,yarn 是对 npm 进行了安装和提升,实现了npm大部分的命令和功能,且二者都遵循 package.json 文件,所以我们也不用担心兼容问题,yarn 完全没有侵入性。我本人在实际运用场景中,也经常使用 yarn 在安装或删除依赖文件,使用 npm 运行项目中定义的如:启动命令,打包命令等,所以二者完全可以同时使用。

二.Yarn的安装和命令

1. 安装Yarn
yarn 有很多种安装方式,对于不同的系统,我们可以区别安装,但在这里我推荐大家使用 Npm 去安装,这种方法最方便简洁。
前提是你安装好了Node.js,你可以运行如下的命令来安装:

 npm i -g yarn

2. Yarn的使用方法
现在 Yarn 已经 安装完毕,可以开始使用了。 以下是一些你需要的最常用的命令。

(1) 新建项目

yarn init

运行后,会在项目里面生成package.json文件。这和npm的初始化一模一样。

(2) 添加依赖

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

将依赖项添加到不同依赖项类别中

yarn add [package] --dev
yarn add [package] --peer
yarn add [package] --optional

devDependencies、peerDependencies 和 optionalDependencies的区别:

在一个Node.js项目中,package.json几乎是一个必须的文件,它的主要作用就是管理项目中所使用到的外部依赖包,同时它也是npm命令的入口文件。

npm目前支持以下几类依赖包管理:
dependencies
应用依赖,或者叫做业务依赖,这是我们最常用的依赖包管理对象!它用于指定应用依赖的外部包,这些依赖是应用发布后正常执行时所需要的,但不包含测试时或者本地打包时所使用的包。

devDependencies
开发环境依赖,仅次于dependencies的使用频率!它的对象定义和dependencies一样,只不过它里面的包只用于开发环境,不用于生产环境,这些包通常是单元测试或者打包工具等,例如gulp, grunt, webpack等。

optionalDependencies
可选依赖,如果有一些依赖包即使安装失败,项目仍然能够运行或者希望npm继续运行,就可以使用optionalDependencies。另外optionalDependencies会覆盖dependencies中的同名依赖包,所以不要在两个地方都写。

bundledDependencies / bundleDependencies
打包依赖,bundledDependencies是一个包含依赖包名的数组对象,在发布时会将这个对象中的包打包到最终的发布包里

peerDependencies
同等依赖,或者叫同伴依赖,用于指定当前包(也就是你写的包)兼容的宿主版本。如何理解呢? 我们可以试想一下,我们编写一个gulp的插件,而gulp却有多个主版本,我们只想兼容最新的版本,此时就可以用同等依赖(peerDependencies)来指定。

(3) 升级依赖包

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

(4) 移除依赖包

yarn remove [package]

(5) 安装项目的全部依赖
这个命令和npm的npm install 命令的用法完全一致。

yarn

yarn install

3. npm和yarn的命令对照
在这里插入图片描述
通过以上图可得,虽然 yarn 并没有实现 Npm 所有的命令功能,但是目前已经可以满足绝大多数开发场景了。

4. Yarn 的命令汇总

命令命令解释
yarn add添加依赖
yarn audit对已安装的软件包执行漏洞审核
yarn autoclean从程序包依赖项中清除并删除不必要的文件
yarn bin显示依赖bin文件夹的位置
yarn cache管理用户目录中的依赖缓存
yarn check验证当前项目中程序包依赖项
yarn config管理依赖配置文件
yarn create创建Yarn工程
yarn dedupe删除重复的依赖
yarn generate-lock-entry生成Yarn锁文件
yarn global在全局安装依赖
yarn help显示Yarn的帮助信息
yarn import迁移当前依赖的项目package-lock.json
yarn info显示有关依赖的信息
yarn init初始化工程并创建package.json文件
yarn install用于安装项目的所有依赖项
yarn licenses列出已安装依赖的许可证及源码url
yarn link链接依赖文件夹
yarn list列出已安装的依赖
yarn login存储您在 registry 上的用户名和 email
yarn logout清除你在 registry 上用户名和 email
yarn outdated列出所有依赖项的版本信息
yarn owner展示依赖作者
yarn pack创建依赖项的压缩gzip
yarn policies规定整个项目中执行Yarn的版本
yarn publish将依赖发布到npm注册表
yarn remove删除依赖
yarn run运行定义的程序脚本命令
yarn tag在依赖上添加,删除或列出标签
yarn team管理组织中的团队,并更改团队成员身份
yarn test运行程序的test命令
yarn upgrade将指定依赖升级为最新版本
yarn upgrade-interactive更新过期依赖的简便方法
yarn version展示依赖版本信息
yarn versions展示所有依赖项版本信息
yarn why显示有关为什么安装依赖的信息
yarn workspaceYarn的工作区信息
yarn workspacesYarn的所有工作区信息

5. npm 和 yarn混合使用
在平时的开发中,尤其是一些相对较老的项目,我们是通常是使用npm来初始化项目的。那现在我们想使用yarn,是不是就要重新搭建环境,或者改动很多配置呢?答案是no,我们不需要做什么改动,因为它们都遵循着同一个配置文件 package.json 的规范,我们可以直接在npm的基础上使用yarn,也能完美运行。


篇尾总结:近几年前端发展的越来越快,相关的工具也越来越多。关于项目中具体选用哪种依赖管理工具,是由项目本身的特点,结合我们自身的使用经验去决定的。作为开发者,希望大家可以多了解一些工具的使用方法和特性,到时候真正使用的时候才会得心应手。我在这里求一个关注、点赞、收藏、评论。拜托了,这对我真的很重要!


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405742.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

css 实现虚线效果的3种方式详解

一、效果 首先可以看一下下图显示的实现效果: 用三种方式实现了虚线效果: 点击查看demo代码 二、实现 1、border 属性 查看 mdn 的 border,我们知道 border 可以用于设置一个或多个以下属性的值:border-width、border-style、…

【微信小程序开发】自定义tabBar案例(定制消息99+小红心)

🤵‍♂️ 个人主页: 计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。 🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推| 还没有账户的小伙伴 速速点击链接…

vue系列(三)——手把手教你搭建一个vue3管理后台基础模板

目录 一、前言: 二、网站页面分析 三、开发步骤 (一)、安装element (二)、安装使用svg插件 (三)、编写主界面框架代码 (四)、编写菜单栏 (五&#xff0…

如何使用wireshark抓取HTTPS数据包?

1、wireshark 抓包为什么不显示出来? wireshark 是基于网络层的抓包工具,通过捕获通信双方的TCP/IP包实现内容提取。对于应用层的数据,如果应用层协议是公开的,就可以直接显示数据。处理HTTPS 协议时,因为不知道客户端…

前端知识——css之flex布局

1.基本概念 flex布局是一种布局模型,经常被称之为flexbox,使用flex布局之后,他会给子元素提供强大空间分配和对齐能力。 在没有使用flex布局之前,常用布局有:流式布局,浮动布局,定…

Vite代理解决跨域问题

Vite代理解决跨域问题 我们在编写前端项目的时候,经常会遇到跨域的问题,当我们访问后端 API 的 URL 路径时,只要域名、端口或访问协议(如 HTTP 和 HTTPS)有一项不同,就会被浏览器认定为跨域。另外我们也会…

小程序真机调试提示系统错误

Error: 系统错误,错误码:80051,source size 7935KB exceed max limit 2MB [20220929 16:18:58][wxfc8aa5984cac7f72] [1.06.2208010][win32-x64]// 说明你源文件大小为7985kb 超过了2M 所以编译失败解决方法 1. 压缩项目中的图或转为base64格式 …

【Spring+SpringMVC+Mybatis】Spring+SpringMVC+Mybatis实现前端到后台完整项目

文章目录🏴‍☠️SpringMVC简介SpringMVC是什么SpringMVC的基础架构SpringMVC的优点🏳️‍🌈SpringMVC接管Web说明三层框架SpringMVC的简单开发🚩Spring搭建🚩Mybatis搭建🏁 Spring整合Mybatis✅结语&#…

(element-ui)取消el-table的hover状态,取消高亮显示

文章目录前言方法一 ------覆盖css样式方法二------卸载掉背景颜色(类似于方法一)方法三------使用函数方法方法四------禁用鼠标悬浮怎么办?究极解决------将错就错前言 在使用element-ui的el-table表格的过程中,会发现&#xf…

VsCode配置JavaWeb(最新)

我个人是很喜欢VsCode的,开源免费、功能全面。所以为了方便,我把我几乎所有的运行都集成到了VsCode上来,JavaWeb也不例外。 前言 之前也在CSDN上看到有些博主写了配置方法,但是很不幸的是,插件Tomcat for java已经不可…

Web过滤器:Filter

Filter 概述工作原理生命周期web.xml配置的常用节点FilterConfig类过滤器链FilterChainHttpFilter的简化设计自动登录功能的改进验证登入页面的改进浏览器的缓存功能概述 Filter过滤器,是Servlet技术中最实用的技术,能够管理Web服务器的所有Web资源,实现信息拦截、权限访问控…

vue动态路由添加,vue-router的addRoute方法实现权限控制,添加根路由和子路由

addRoute路由分为静态路由和动态路由静态路由和动态路由的优缺点动态路由实现思路:动态路由遇到的问题与解决方式动态添加子路由路由分为静态路由和动态路由 静态路由和动态路由的优缺点 1、中大型项目,采用的都是动态路由方式,因为后台导航目录运营人…

Vue3如何封装组件?

🔥🔥🔥欢迎关注csdn前端领域博主: 前端小王hs 🔥🔥🔥email: 337674757qq.com 🔥🔥🔥前端交流群: 598778642 在开发Vue3项目的过程中,我们经常会使…

H5页面跳转微信小程序时:wx.miniProgram.navigateTo 报错 ‘wx‘ is not defined no-undef

有一个功能,需要从H5页面跳转到微信小程序,查了微信官方文档:只需要引入js文件,然后直接使用即可: 1:引用: 当然也可以下载下来直接引用项目具体位置的js文件 2: 使用: 然后一直报错…

vue3 hooks使用

vue3 hooks使用 今天我们稍微说一下 vue3 项目中的 hooks 的使用,其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的,学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉,就算没用过也一定了解过,也就是混入,通过 mixin …

useDark的使用方法以及Element-Plus深色主题切换案例(vue3)

useDark 顾名思义,是否使用深色模式,useDark它是通过读取localStorage/sessionStorage的存储值(key 是可自定义的)。从而设置html的class。VueUse的官方案例使用了Tailwind CSS 偏好的暗模式。因为我们不一定都用得到Tailwind CSS…

vue实现本地预览word(docx)、excel(xlsx)、pdf文件

vue实现本地预览word(docx)、excel(xlsx)、pdf文件 实现效果: 通过点击预览,浏览器打开新标签页展示文件内容 word效果: pdf效果: excel效果: 前期准备: word插件: npm install --save …

【TFS-CLUB社区 第5期赠书活动】〖Python OpenCV从入门到精通〗等你来拿,参与评论,即可有机获得

文章目录❤️‍🔥 赠书活动 - 《Python OpenCV从入门到精通》❤️‍🔥 编辑推荐❤️‍🔥 内容提要❤️‍🔥 赠书活动 → 获奖名单❤️‍🔥 赠书活动 - 《Python OpenCV从入门到精通》 内容简介: 《Python O…

【uniapp】页面下拉刷新

目录 一、全局 二、局部 1、一个页面一个下拉刷新 2、一个页面多个下拉刷新(切换时滚动条回到顶部) 3、一个页面多个下拉刷新(切换时恢复滚动条位置) 一、全局 修改pages.json的"enablePullDownRefresh": true, …

【Node.js实战】一文带你开发博客项目之登录(前置知识)

个人简介 👀个人主页: 前端杂货铺 🙋‍♂️学习方向: 主攻前端方向,也会涉及到服务端 📃个人状态: 在校大学生一枚,已拿多个前端 offer(秋招) 🚀未…