利用yarn代替npm管理前端项目模块依赖的方法详解


Posted in Javascript onSeptember 04, 2017

本文主要给大家介绍了关于yarn代替npm管理前端项目模块依赖的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

什么是 yarn?

简单来说,yarn 是一个与 npm 功能相同的工具,用于前端项目的依赖管理。在使用 npm 的项目中,使用 npm 命令的地方都可以使用 yran 来代替。

为什么要使用 yarn 替代 npm 呢?yarn 相对 npm 来说,主要的特点有:

  • 离线、并行安装:依赖并行安装,缓存已下载过的依赖并优先使用,各种优化使得安装依赖速度显著提升
  • 确定性:默认生成 yarn.lock 文件,可以保证各开发人员开发安装依赖的目录具有一致性
  • more…

好吧,其实 npm 也在不断的优化改进中。但 yarn 确实有很多亮点,至少当前是非常值得你去使用的。

yarn 使用快速上手

安装

虽然安装 yarn 可以不依赖 npm,但这里还是建议你使用 npm 来安装吧,快速而简洁:

npm i -g yarn

在项目中使用

首次初始化项目时执行,在每次项目启动/构建之前,也都应执行一次,以保证本地依赖得到及时更新。

该命令会检查 package.json 和 yarn.lock 文件中的依赖,当有其内容更新,会进行依赖更新安装。

yarn <install>

依赖更新。当你希望更新依赖模块到其最新版本时执行该命令。

yarn upgrade

yarn 常用命令

开始新项目

yarn init

添加依赖包

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

升级依赖包

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

移除依赖包

yarn remove [package]

安装项目的全部依赖

yarn

或者

yarn install

yarn 使用实践建议

我们选择 yarn 的主要原因是依赖安装速度快,默认生成的 yarn.lock 会保证所有成员的模块依赖目录能够很好的保持一致。

yarn install 和 yarn upgrade 的执行逻辑,可以让你可以很清晰的管理本地依赖的版本更新时机,又能很好的让所有开发人员的本地依赖保持一致性。

使用 npm install 则有些乱,当你不想写死版本号依赖时,它总会安装依赖包最新可用的版本,但这在有时候并不是你想要的。

在 yarn 之前,我们使用的是 npm+淘宝仓库方案,也会使用 cnpm。在国内,cnpm 的依赖安装速度比 yarn 还要快,但 cnpm 在 windows 下通过创建链接引用的方式管理包依赖,可能会带来一些问题。

现在我们会默认使用淘宝仓库,使用 npm 管理全局依赖,使用 yarn 管理具体项目内的依赖。

在一个新的项目中使用 yarn,我们会这么来做:

  • 写好 package.json,写入初始的第三方依赖
  • 执行 yarn 命令,初始化安装项目依赖,生成 yarn.lock 文件
  • 后续通过执行 yarn add xxx 添加更多需要的依赖(也可直接在 package.json 文件中写入)
  • 当确定需要更新依赖模块到其最新版本时,执行 yarn upgrade 命令
  • 配置项目启动命令执行前,先执行 yarn 命令,以保证当 yarn.lock 被更新时,本地依赖也及时得到更新。例如,在 package.json 的 script 部分中配置 start 命令: "start": "yarn && yarn run build:dev"

你是如何来使用 yarn 的呢?欢迎分享你的经验。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

相关参考

npm https://docs.npmjs.com
yarn https://yarnpkg.com

Javascript 相关文章推荐
怎么用javascript进行拖拽
Jul 20 Javascript
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
js href的用法
May 13 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
使用jQuery实现购物车
Oct 29 jQuery
JS实现匀加速与匀减速运动的方法示例
Sep 04 #Javascript
node-sass安装失败的原因与解决方法
Sep 04 #Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 #Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 #Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 #Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 #Javascript
vue中component组件的props使用详解
Sep 04 #Javascript
You might like
使用Apache的rewrite技术
2006/06/22 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php中的常用魔术方法总结
2013/08/02 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python列表与元组详解实例
2013/11/01 Python
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
函授自我鉴定
2013/11/06 职场文书
办公设备采购方案
2014/03/16 职场文书
王老吉广告词
2014/03/20 职场文书
学校评语大全
2014/05/06 职场文书
组工干部对照检查材料
2014/08/25 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
寻找成龙观后感
2015/06/12 职场文书