网站首页 > 精选文章 正文
Yarn是一个通过它可以使用全世界开发者的代码,或者分享自己的代码的JavaScript 包管理工具,也是 一个未来可能取代npm的新型包管理器。
就像官网介绍的一样,通过Yarn你可以使用其他开发者针对不同问题的解决方案,使自己的开发过程更简单 使用过程中遇到问题,你可以将其上报或者贡献解决方案。一旦问题被修复,Yarn会更新保持同步。这也是我们需要去了解的原因之一吧。
Yarn安装
在windows系统上Yarn有三种安装方式:
- 直接下载.msi安装文件,直接运行安装即可
- 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 中记录的依赖包,相当方便快捷:
你,值得拥有!!!
猜你喜欢
- 2025-07-06 OWL框架(Odoo):有回勾、反应器和并发的基于组件的类
- 2025-07-06 定制网站建设的流程有哪些?(定制网站建设报价)
- 2025-07-06 Bootstrap在React中的实现,易于使用的React组件——Reactstrap
- 2025-07-06 web前端需要掌握什么知识(web前端要做什么)
- 2025-07-06 Vue3+Bootstrap5项目初始化(vue初始化数据放在哪里合适)
- 2025-07-06 专为Vue打造的开源表单验证框架,Github star7k+——VeeValidate
- 2025-07-06 开源软件分享-VUE后台管理模板(vue后端管理系统)
- 2025-07-06 Vue3+Bootstrap5整合:企业级后台管理系统实战
- 最近发表
-
- OWL框架(Odoo):有回勾、反应器和并发的基于组件的类
- 前端进阶之Yarn使用教程(前端 lerna)
- 定制网站建设的流程有哪些?(定制网站建设报价)
- Bootstrap在React中的实现,易于使用的React组件——Reactstrap
- web前端需要掌握什么知识(web前端要做什么)
- Vue3+Bootstrap5项目初始化(vue初始化数据放在哪里合适)
- 专为Vue打造的开源表单验证框架,Github star7k+——VeeValidate
- 开源软件分享-VUE后台管理模板(vue后端管理系统)
- Vue3+Bootstrap5整合:企业级后台管理系统实战
- Linux系统各个文件介绍(linux系统各个文件夹及用处)
- 标签列表
-
- 向日葵无法连接服务器 (32)
- git.exe (33)
- vscode更新 (34)
- dev c (33)
- git ignore命令 (32)
- gitlab提交代码步骤 (37)
- java update (36)
- vue debug (34)
- vue blur (32)
- vscode导入vue项目 (33)
- vue chart (32)
- vue cms (32)
- 大雅数据库 (34)
- 技术迭代 (37)
- 同一局域网 (33)
- github拒绝连接 (33)
- vscode php插件 (32)
- vue注释快捷键 (32)
- linux ssr (33)
- 微端服务器 (35)
- 导航猫 (32)
- 获取当前时间年月日 (33)
- stp软件 (33)
- http下载文件 (33)
- linux bt下载 (33)