Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >yarn.lock 你锁明白了吗?

yarn.lock 你锁明白了吗?

作者头像
童欧巴
发布于 2021-08-20 09:28:29
发布于 2021-08-20 09:28:29
2.7K00
代码可运行
举报
文章被收录于专栏:前端食堂前端食堂
运行总次数:0
代码可运行

前言

你是否遇到过这种场景,项目拉下来后执行yarn install安装依赖,yarn.lock 却提示有变更,我明明什么都没做呢,这是为啥?但是基于以往的经验(出过 case),yarn.lock 不应该有 diff 才对,一定是哪里出了问题!但是git diff yarn.lock发现自己也看不明白(我好菜 ?)

举个 ?

还原一下我出过的 Case ? 项目里原本有个依赖foo

  • package.json 里定义的foo@^1.0.1
  • yarn.lock 里的版本是1.0.1

同学 A 是负责foo这个库的开发,一次发版后,到项目里升级这个依赖到 1.1.0,但是提交代码时,只变更了 package.json,没有更新 yarn.lock

  • package.jsonfoo@^1.0.1``foo@^1.1.0
  • yarn.lock 没变,还是1.0.1

然后大家每次拉新代码并安装依赖后,本地总有个烦人的 yarn.lock 文件变更,大家心想应该是有人升级依赖的时候忘记提交 yarn.lock 了于是同学 B 行动了:

  • 先看了下 foo 这个库现在有哪些版本,最新版本是1.1.2,跟 package.json 里定义的^1.1.0差了两个版本,不能保证线上是1.1.0,因为每次上线,都会去找符合^1.1.0这个 version range 里的最新版本
  • 所以去看了下最后一次上线的构建日志,发现下载的是1.1.2
  • 于是提交了 yarn.lock,把版本锁在了1.1.2

然后过了一天,拉群了 ?

  • 1.1.2 版本有 bug,修复后发布了 1.1.3
  • 但是项目里,由于 B 把版本锁在了 1.1.2,锁住了 bug ?
  • 同学 A 质问 B 为什么要锁别人的库的版本 ?
  • 这个 case 记了几个 TODO
    • 因为没有提交 yarn.lock,不确定同学 A 是通过yarn upgrade升级的版本,还是手动去改了 package.json,所以——不要手动修改 package.json 升级版本
    • 升级依赖后,一定要同时提交 package.json 和 yarn.lock

About yarn.lock

yarn.lock 的作用?

锁定唯一版本!

  • package.json 里定义的是版本区间,如^1.0.0
  • 而 yarn.lock 里的version字段是唯一的版本号,如1.0.0

yarn.lock 长啥样?

里面都是一块一块的,每一块大概长下面这样:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
core-js-compat@^3.0.0:
  version "3.14.0"
  resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.14.0.tgz#b574dabf29184681d5b16357bd33d104df3d29a5"
  integrity sha1-tXTavykYRoHVsWNXvTPRBN89KaU=
  dependencies:
    browserslist "^4.16.6"
    semver "7.0.0"

Identifier(s)

第一行的core-js-compat@^3.0.0是依赖的 identifier。和 package.json 里对应的包名和版本区间,用@连接。这边的标题里带了(s),是因为多个 Identifier 最终可能都指向同一个版本(具体例子可以看下文### dependencies里给出的例子)

version

第二行version是实际安装的版本。通常是满足版本区间里的一个版本,比如上一行 identifier 里版本区间是^3.0.0,这里实际安装的是3.14.0,符合要求。但是为什么要说是“通常”呢,因为有例外,在后文### resolutions部分会讲到。

resolved

第三行resolved的是一个链接,是下载这个包的地址。这个 url 里的域名部分跟项目里配置的 .npmrc你本地的 npm 配置的 registry有关。

integrity

第四行integrity是对resolved下载下来的文件进行完整性校验。如果出现 diff,说明同一个下载链接对应的文件被修改过。

dependencies

第五行dependencies是这个包自己的依赖。如这里依赖的browserslist "^4.16.6",你想看下实际安装的哪个版本,就可以把它拼成 Identifierbrowserslist@^4.16.6",以此为关键字在 yarn.lock 中搜索,就能找到对应的“块”了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
browserslist@4.16.6, browserslist@^4.0.0, browserslist@^4.11.1, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.0, browserslist@^4.16.6, browserslist@^4.3.6, browserslist@^4.6.2, browserslist@^4.6.4, browserslist@^4.7.2, browserslist@^4.9.1:
  version "4.16.6"
  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
  integrity sha1-15ASd6WojlVO0wWxg+ybDAj2b6I=
  dependencies:
    caniuse-lite "^1.0.30001219"
    colorette "^1.2.2"
    electron-to-chromium "^1.3.723"
    escalade "^3.1.1"
    node-releases "^1.1.71"

上面这个例子第一行有多个 Identifiers,最终都指向第二行的version "4.16.6",可以检查下4.16.6版本满足上面所有 Identifiers 里的版本区间:4.16.6^4.0.0...

yarn.lock 是如何生成的?

yarn.lock 是自动生成的,你不应该去手动的修改

依赖管理

比如我们的常规操作,都会自动更新 package.json 和 yarn.lock

  • 新增依赖:yarn add
  • 升级依赖:yarn upgrade

更多可参考https://classic.yarnpkg.com/en/docs/managing-dependencies

霸道的resolutions

假如你的项目依赖了foo,foo依赖了bar@^1.0.0。假设bar现在有两个版本1.0.01.1.0。很不幸,bar在发布1.1.0的时候没有做好向后兼容。导致foobar@1.1.0不能搭配使用。如果你可以等:

  • 要么等foo把依赖bar锁成1.0.0并重新发版
  • 要么等bar修复兼容问题后重新发版

那如果你等不了呢,你已知foobar@1.0.0可以正常工作。如果你能锁住foobar的依赖就好了,但是这定义在foo的 packge.json 里,你总不能去改 node_modules/foo/package.json 吧?这不合适。`resolutions`[1]可以解决你的问题,只要在你自己项目的 package.json 里定义:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"resolutions": {
  "foo/bar": "1.0.0"
}

这里的 key"foo/bar"表示foo直接依赖bar,把版本区间重写成1.0.0。如果foo不是直接依赖的barfoo -> ... -> bar),我还需要把中间的链路都捋清楚吗?不用那么麻烦!

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"resolutions": {
  "foo/**/bar": "1.0.0"
}

如果你的项目里有很多依赖直接/间接的依赖了bar,每个定义的版本区间可能有差别,你知道某个版本可以让他们都能正常工作,而不用安装多个版本。也可以不用声明前缀部分,只写包名bar。这样不管是哪里依赖到了bar都会指向你声明的哪个版本。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"resolutions": {
  "bar": "1.0.0"
}

执行yarn install后,在 yarn.lock 里搜索bar@

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
bar@^1.0.0 bar@1.1.0 bar@^2.0.0:
  version "1.0.0"
  ...

可以看到,resolutions可以违背版本区间的限制,比如上例中 Identifiers 里的bar@1.1.0``bar@^2.0.0

如何避免出现问题?

yarn.lock 与 package.json 不 match

场景

只改动 package.json,忘记提交 yarn.lock

问题

执行yarn install后,yarn.lock 有变更

如何解决

  • 解决掉引入问题的人(PEACE & LOVE)
  • 确认 diff 并提交变更后的 yarn.lock
    • 确定是哪些依赖产生的 diff,并回归相关功能(成本有点大,而且如果依赖关系比较复杂,那是很难确认影响面的)
    • OR ? 成最后一次上线的版本(⚠️ 可能会 ? 住 bug?)

可以看到出现问题再解决还是很棘手的,而且有一定赌的成分,所以我们最好预防。

如何预防

即使现在项目是好的,我们是不是也应该防患于未然!

  • 开发的同学 &&CR 共同把关 ??
  • 阻塞构建 ?(有以下几种方案可选)
    • 优点:简单粗暴 && 直观(不会出现因为对命令 or 参数理解存在误差造成不符合预期的情况)
    • 缺点:慢!效率低!因为会把包括需要更新的依赖也下载完,本来应该在检测到需要更新的时候就停止的(目前没有想到什么好办法)
    • resolutions里修改版本,不会报错
    • Classic yarn (version 1) 在 package.json 里移除依赖,也不会报错(v2 修复了这个问题,详见https://github.com/yarnpkg/yarn/issues/5840)
    • `npm ci`[2]npm install类似,但是在安装依赖的过程中如果发现 package-lock.json 不匹配,则会抛错并退出,而不去更新 lock file
    • `yarn install --frozen-lockfile`[3]等价于npm ci,但是在测试过程中发现几个问题:
    • yarn install && git diff`--exit-code`[4]yarn.lock正常执行 install 命令安装依赖,再检查 lock file 有无 diff

把 lock file 删掉,整个重装

场景

当你更新了某个依赖后,发现项目跑不起来了,推测可能是依赖的问题。有没有尝试过把 yarn.lock + node_modules 都删了重新安装,幸运的话可能“问题就解决了”(解决了,但是好像没完全解决,反正项目跑起来了)

问题

把 yarn.lock 删掉后,原本锁住的版本都放开了,执行yarn install的时候会根据 package.json 里定义的版本区间去找最新版。所以,可能会造成你预期外的依赖也被更新了,不幸的话可能会引入 bug。

解决思路

可以单独搞一个依赖empty-lock-lock

  • 什么都不做(一个空的库),发版1.0.0
  • 定义一个postinstall脚本,直接抛错,发版1.0.1

在项目中安装依赖yarn add empty-lock-lock@1.0.0 --dev,yarn.lock 里会锁定版本为1.0.0。然后准备一个陷阱:

  • 手动把 package.json 里的版本改成区间^1.0.0
  • 手动修改 yarn.lock 里,把 Identifier 部分的empty-lock-lock@1.0.0也替换成empty-lock-lock@^1.0.0

修改后提交,可以再执行yarn install验证下,yarn.lock 没有 diff,证明我们手动修改后的 package.json 和 yarn.lock 仍然是 match 的。等小白鼠上钩,如果把 yarn.lock 整个删掉了,再执行yarn install,安装到empty-lock-lock的时候,会根据 package.json 里定义的^1.0.0版本区间里找最新的,这时候会找到1.0.1版本,下载后触发postinstall就报错啦!

THE END

希望通过本文,可以瞄到 yarn.lock 神秘的面纱下的一角,当下次再看到 yarn.lock 产生 diff 时不会那么迷茫和焦虑。如果各位大大在阅读过程中发现了问题,请务必按头改正!感恩 ❤️ 感谢团队内的小伙伴们一起探讨问题 && 提供小妙(笋)招。感恩 Plus ❤️❤️❤️

参考资料

  • https://robertcooper.me/post/how-yarn-lock-files-work-and-upgrading-dependencies

扩展阅读

  • package.json 中定义的各种依赖 ?https://classic.yarnpkg.com/en/docs/package-json

参考资料

[1]

resolutions: https://classic.yarnpkg.com/en/docs/selective-version-resolutions/#toc-how-to-use-it

[2]

npm ci: https://docs.npmjs.com/cli/v7/commands/npm-ci

[3]

yarn install --frozen-lockfile: https://stackoverflow.com/questions/58482655/what-is-the-closest-to-npm-ci-in-yarn

[4]

--exit-code: https://git-scm.com/docs/git-diff#Documentation/git-diff.txt---exit-code

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-08-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端食堂 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
​利用腾讯云轻量应用服务器Nextcloud应用镜像快速搭建私有同步云盘
Nextcloud是一款开源免费的云存储网盘软件,可以帮助您快速便捷地搭建一套属于自己或团队共享的云同步网盘,从而实现跨平台跨设备文件同步、共享、版本控制、团队协作等功能。
青阳
2021/03/22
13.9K1
​利用腾讯云轻量应用服务器Nextcloud应用镜像快速搭建私有同步云盘
腾讯云轻量快速搭建个人网盘
现在市面上的网盘大多数都限速,并且文件可能不安全,所以拥有一个自己的服务器就可以搭建轻便的个人网盘了,最方便的是你不需要任何tx服务器的知识,因为腾讯云轻量应用服务器已经把镜像安排好了,那么话不多说,我们马上开始吧!
星橙
2021/07/17
12.1K0
腾讯云轻量快速搭建个人网盘
基于腾讯云lighthouse搭建私有网盘Cloudreve【超高性价比】
很多小伙伴都有使用网盘存储的习惯,在本地存储不够的时候,将东西存储在网盘中,既可以随时备份,也不占用本地空间。
炒香菇的书呆子
2024/11/15
9200
基于腾讯云lighthouse搭建私有网盘Cloudreve【超高性价比】
轻量锐驰 x 轻量对象存储 搭建不限速网盘
大多数第三方网盘在进行分享时无法保障下载用户也享受高速下载的权益,而高昂的会员费+限速政策使不管是自己使用还是分享他人都会有不愉快的体验
小宇-xiaoyu
2025/01/21
6990
轻量锐驰 x 轻量对象存储 搭建不限速网盘
【5分钟玩转Lighthouse】这可能是全网最容易搭建的网盘
Cloudreve是一款开源的网盘软件,支持服务器本机、腾讯云COS等多种存储方式,提供离线下载、拖拽上传、在线预览等功能,可以帮助用户快速搭建个人或多人使用的网盘系统。Lighthouse Cloudreve应用镜像集合了Cloudreve、Nginx、MariaDB、宝塔Linux面板和Aria2。省去了安装Docker和Cloudreve的步骤,鼠标点一点,五分钟将您的Lighthouse变身云盘!
Scott1
2021/06/09
8.7K3
【5分钟玩转Lighthouse】这可能是全网最容易搭建的网盘
腾讯云轻量应用服务器快速搭建一个专属网盘
云盘我想大家接触的一定不会少。云盘很好地解决了文件存储和共享的问题,但随着大量云盘厂商的退出,剩余的云盘服务也越来越少。有些云盘虽然上传速度快,但是下载速度较慢,不开通会员基本无法使用。同时还存在云盘被破解、文件被盗的问题。考虑到文件存储、共享以及保证文件安全的问题,我也就产生了自己搭建云盘的想法。
青阳
2021/04/02
4K0
利用腾讯云轻量搭建属于自己的博客小程序
现在是QQ和微信内部流量的时代,如果你分享的链接可以在QQ和微信正常打开还好,但是如果变白或者变红那么就没有人愿意打开了,就像这样:
星橙
2021/09/09
4.3K0
利用腾讯云轻量搭建属于自己的博客小程序
自定义开源 Piwigo 相册——分享生活、记录漫漫人生路中的美好时光和感动
首先,你要拥有一台云服务器,这里购买的是腾讯云的轻量应用服务器。专属优惠购买连接:轻量应用服务器Lighthouse。新老用户同享!
星橙
2021/08/20
3.2K0
【玩转腾讯云】用轻量应用服务器搭建网站
不少小伙伴应该知道,腾讯云正在内测轻量应用服务器,而且马上就要公测了!我提前申请到了一台内测机器,那就来告诉大家,在公测后购买腾讯云轻量应用服务器之后如何玩转它吧,比如搭建静态或者动态网站!
Bess Croft
2020/06/12
11.9K2
【玩转腾讯云】用轻量应用服务器搭建网站
基于腾讯云轻量应用服务器和Umami部署网站流量统计后台
想知道自己网站,每天有多少人浏览?或者想更直观的查看自己网站的访客统计?很多人会使用Google Analytics等工具进行统计。一般统计的数据:
Mintimate
2022/03/01
5.9K2
基于腾讯云轻量应用服务器和Umami部署网站流量统计后台
腾讯云轻量应用服务器|3分钟带你快速搭建电商独立站
大家都知道,今年的经济形势比较严峻,那么作为夹缝中求生的中小企业就显得更加困难。在这种情况下,从企业的角度来考虑,如果还是像以往一样购买物理服务器,部署搭建基础的数据库服务,应用服务等,对于企业来说,确实是一笔不小的开支。那么在这样的情况下,企业上云无疑是最好的选择,于是腾讯云双十一首次推出了拼团GO活动,中小企业可以基于自身的业务场景需求来购买自己需要的云服务器、数据库、Redis等云产品服务,双十一钜惠活动地址:https://cloud.tencent.com/act/pro/double11-2024?fromSource=gwzcw.8891757.8891757.8891757
六月的雨在Tencent
2024/11/24
1K0
腾讯轻量应用服务器快速搭建一个高效博客
大家知道的是,我一直是腾讯云的忠实粉丝,现在的应用都是基于腾讯云的 Lighthouse。那么理所当然我下面讲的都是基于腾讯云的轻量应用服务器。
青阳
2021/03/22
1.9K0
腾讯轻量应用服务器快速搭建一个高效博客
腾讯云轻量应用服务器配置及建网站教程
腾讯云轻量应用服务器如何使用?新手站长以搭建WordPress为例,使用宝塔镜像,先在防火墙开通端口。腾讯云百科来详细说下腾讯云服务器从购买、配置到网站上线全流程,包括轻量服务器配置选择、应用镜像选择、重置密码、防火墙开放端口教程等详细教程:
用户9264446
2022/08/10
9.6K0
腾讯云轻量应用服务器配置及建网站教程
【好玩儿的Docker项目】用腾讯云轻量应用服务器10分钟搭建一个轻量的视频分享网站——Fireshare
文章首发于:https://blog.laoda.de/archives/docker-compose-install-fireshare
二十五画生
2022/11/10
3.8K0
【好玩儿的Docker项目】用腾讯云轻量应用服务器10分钟搭建一个轻量的视频分享网站——Fireshare
锐驰云端 轻速上云 腾讯云锐驰型轻量云服务器简单测评及其一应用——部署PhotoPrism
继2024年12月26日阿里云上架了200M峰值带宽不限制流量的轻量云服务器后,昨晚22:30,腾讯云也正式推出并全量发售自家的200M峰值带宽不限制流量的轻量云服务器——“腾讯云轻量应用服务器锐驰型套餐”,那么,小俊第一时间自费自购了一台2C2G200M的机器,接下来就带大家来抢先实机测评一下腾讯云轻量应用服务器锐驰型套餐以及小俊想到的其中一个主要应用场景吧!
小俊是我
2025/01/22
1.3K0
锐驰云端 轻速上云 腾讯云锐驰型轻量云服务器简单测评及其一应用——部署PhotoPrism
腾讯云— 轻量应用服务器实践
l只有地域,没有可用区,实际上轻量应用服务器的VPC,可用性组也是不存在的,默认完成创建并且不可定义。
Chris Fei
2021/06/26
15.4K0
腾讯云— 轻量应用服务器实践
腾讯云轻量应用服务器搭建一个Hexo静态博客
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。 部署Hexo推荐使用【腾讯云】1核2G5M轻量应用服
zuantou
2022/04/25
1.1K1
腾讯云轻量应用服务器搭建一个Hexo静态博客
【玩转Lighthouse】使用 Cloudreve镜像快速搭建自己的私人网盘
1.首先得购买一台Lighthouse服务器,直接选择Cloudreve应用镜像(如已有Lighthouse服务器,重装系统选择该应用即可)。
用户5277074
2022/04/13
2K3
腾讯云轻量应用服务器和CVM云服务器有什么区别?
腾讯云轻量服务器和云服务器有什么区别?为什么轻量应用服务器价格便宜?是因为轻量服务器CPU内存性能比云服务器CVM性能差吗?轻量应用服务器适合中小企业或个人开发者搭建企业官网、博客论坛、微信小程序或开发测试环境,云服务器CVM适合更复杂如高并发网站、大数据计算、机器学习等复杂应用场景。轻量服务器网从性能测试、网络带宽、计费价格、应用搭建及适合用户等方面来详细说明腾讯云轻量应用服务器和云服务器CVM区别:
上云小秘书
2023/04/10
9.9K0
腾讯云轻量应用服务器和CVM云服务器有什么区别?
双十一腾讯云轻量服务器成就个人网站
一直以来,我都渴望拥有一个属于自己的个人网站,用于记录生活点滴、分享兴趣爱好和专业知识。在众多的服务器选择中,我最终将目光锁定在了腾讯云的轻量级应用服务器上。
Khan安全团队
2024/11/23
4420
推荐阅读
相关推荐
​利用腾讯云轻量应用服务器Nextcloud应用镜像快速搭建私有同步云盘
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验