当前位置:首页 > 技术分析 > 正文内容

前端进阶之Yarn使用教程

ruisui882个月前 (04-23)技术分析27

Yarn是一个通过它可以使用全世界开发者的代码,或者分享自己的代码的JavaScript 包管理工具,也是 一个未来可能取代npm的新型包管理器。

就像官网介绍的一样,通过Yarn你可以使用其他开发者针对不同问题的解决方案,使自己的开发过程更简单 使用过程中遇到问题,你可以将其上报或者贡献解决方案。一旦问题被修复,Yarn会更新保持同步。这也是我们需要去了解的原因之一吧。

Yarn安装

在windows系统上Yarn有三种安装方式:

  1. 直接下载.msi安装文件,直接运行安装即可
  2. Scoop命令安装,Scoop 是一个 Windows 的命令行安装程序,你可以用下面这些指令安装 Scoop。scoop install yarn3.Chocolayey安装,如果已经安装了 Chocolatey,则可以在控制台中运行下面的命令安装 yarn:
 scoop install yarn

当然,一般我们都剑走偏锋,今天我们用第四张安装方式---npm,这也是比较快速简单的方式:

npm install -g yarn

安装完成后,通过打印版本号,验证是否安装成功:

yarn --version

初始化项目

创建一个项目文件夹,进入到项目目录执行下面命令:

yarn init

执行完成后,会在根目录下生成一个yarn-error.log文件,如下图:

添加依赖包

通过使用 yarn add [package-name]命令,来添加依赖包,以下面添加jquery包为例:

yarn add jquery

第一次添加成功后,根目录会在多生成三个文件,一个node_modules文件夹(以后所有的依赖包都会默认放在这个里面),一个package.json文件,里面会自动生成你安装的依赖包名称以及版本号,还有一个yarn.lock文件:

//package.json文件
{
 "dependencies": {
 "jquery": "^3.4.1"
 }
}

批次添加包

一批次多个包添加,只需要下面一个命令就ok了(以安装bootstrap和vue为例):

yarn add bootstrap vue

这速度怎能用一个快字形容,秒完成的事,这也是相对于npm,我更习惯yarn的一方面

更新指定版本的包文件

在我们用到不同的包文件时,有时候可能需要升级或者降级版本号,所以这时候就用得上下面的操作命令,更新指定版本的包文件:

#yarn upgrade package-name@版本号
#还是以jquery为例
yarn upgrade jquery@2.1.4

执行完成后,package.json文件里就会生成对应的包版本号

生成指定版本的包文件

既然可以更新到指定版本的包文件,那么再生成的时候,我们就可以指定生成不同版本的包文件,如下命令:

#yarn add package-name@版本号
yarn add jquery@2.1.4

将包更新到最新版本

只需要执行yarn upgrade --latest [package-name],就能生成最新版本的包文件:

#yarn upgrade --latest [package-name]
yarn upgrade --latest jquery

删除包文件

#yarn remove [package-name]
yarn remove jquery

安装项目的全部依赖

执行下面命令,就可以安装所有的yarn下的包文件:

yarn
#或者
yarn install

yarn.lock (自动锁定安装包版本)

前面我们提到过,安装第一个包文件后,根目录会有一个yarn.lock文件生成。在Npm 中有一个名为 shrinkwrap 的特性,其目的是在生产环境中使用时锁定包依赖。shrinkwrap 的挑战是每个开发者都必须手动运行 npm shrinkwrap 生成 npm-shrinkwrap.json 文件。

使用 Yarn,则截然不同。在安装过程中,会自动生成一个 yarn.lock 文件,yarn.lock 会记录你安装的所有大大小小的。有点类似 PHP 开发者们所熟悉的 composer.lock。yarn.lock 锁定了安装包的精确版本以及所有依赖项,只要你不删除 yarn.lock 文件,再次运行 yarn install 时,会根据其中记录的版本号获取所有依赖包。有了这个文件,你可以确定项目团队的每个成员都安装了精确的软件包版本,部署可以轻松地重现,且没有意外的 bug。你可以把 yarn.lock 提交到本库里,这样其他签出代码并运行 yarn install 时,可以保证大家安装的依赖都是完全一致的。

例如咱们上面安装的jquery,bootstrap,vue会在yarn.lock中有记录,如下图:

根目录下创建一个yarn的文件夹,并将 package.json 和 yarn.lock文件从 yarnDemo文件夹中复制过来。

进入yarn 文件夹 执行 yarn命令,即可一键下载 yarn.lock 中记录的依赖包,相当方便快捷:

你,值得拥有!!!

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3550.html

分享给朋友:

“前端进阶之Yarn使用教程” 的相关文章

gitlab简单搭建与应用

一、gitlab1、简介GitLab是利用Ruby on Rails一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。与Github类似,GitLab能够浏览源代码,管理缺陷和注释。可以管理团队对仓库的访问,它非常易于浏览提交过的版本并提供一个文件历...

深度解析!AI智能体在To B领域应用,汽车售后服务落地全攻略

在汽车售后服务领域,AI智能体的应用正带来一场效率和专业度的革命。本文深度解析了一个AI智能体在To B领域的实际应用案例,介绍了AI智能体如何通过提升服务顾问和维修技师的专业度及维修效率,优化汽车售后服务流程。上周我分享了AI智能体+AI小程序To C的AI应用场景《1000%增长!我仅用一个小时...

雅马哈TMAX 560 TECH MAX 外媒深度测评

应雅马哈(Yamaha)的邀请,在葡萄牙埃斯托里尔对全新的Yamaha TMAX 560 Tech Max踏板车进行了测试,在这里TMAX 560 Tech Max售价为11649英镑。雅马哈TMAX长期以来一直站在踏板车的顶端,就声誉和知名度而言,它是当之无愧的大踏板界NO.1。2020 TMAX...

vue 开发规范

项目运行指南(#项目运行指南)开发本地环境(#开发本地环境)开发相关插件/工具(#开发相关插件工具)开发规范(#开发规范)vue(#vue)【数据流向】(#数据流向)【慎用全局注册】(#慎用全局注册)【组件名称】(#组件名称)【组件中的 CSS】(#组件中的-css)【统一标签顺序】(#统一标签顺序...

thinkphp8+vue3微信小程序商城,发布公众号App+SAAS+多商户

项目介绍三勾小程序商城基于thinkphp8+vue3+element-ui+uniapp打造的面向开发的小程序商城,方便二次开发或直接使用,可发布到多端,包括微信小程序、微信公众号、QQ小程序、支付宝小程序、字节跳动小程序、百度小程序、android端、ios端。支持主题色+自定义头部导航+自定义...

TDesign企业级开源设计系统越发成熟稳定,支持 Vue3 / 小程序

TDesing 发展越来越好了,出了好几套组件库,很成熟稳定了,新项目完全可以考虑使用。早在2021年,腾讯的 TDesing 刚发布不久,我就写了一篇简短的文章来介绍,当时主要关注的是 TDesign 的 Vue 组件库和用来搭建 admin 后台系统的实用性。虽然当时看起来不错,但还处于测试版,...