记录一次切换包管理器引发的血案

开发 开发工具
虽然上面只提到了 antd 的版本不一致导致的问题,实际上还有其他的问题也是由于版本不一致导致的。所以我们在切换包管理的时候,尽可能的保持包版本一致。

​背景

我们现在的项目统一用 yarn 进行包管理,之前有一个旧项目之前使用的是 npm 进行管理。于是我决定切换一下。

我具体的做法简单粗暴,直接 yarn install。

问题

结果我发现之前还好好的项目,突然就出现各种问题,其中一个问题是 ANTD 的图标重复渲染了,显示出来两个。

经过一轮搜索,我找到一个 ISSUE,看起来是版本发生了一些变更。

图片

这...估计是我切换包管理器导致的。

分析问题

我们项目依赖 antd 的版本是 3.2.2,另外一个库 json-schema-editor-visual 依赖于 ntd@^3.1.6。

在 package-lock.json 中,两个 antd 的版本合成了一个,最后只安装了 3.2.2​ 的版本。这是因为 json-schema-editor-visual 中使用了 ^3.1.6,并没有锁次版本,所以它直接跟外面的同时下载一个版本。

回顾以下基础知识,npm 的版本锁定的规则如下:

  • 符号^:表示主版本固定的情况下,可更新最新版。例如:vuex: "^3.1.3",3.1.3及其以上的3.x.x都是满足的。
  • 符号~:表示次版本固定的情况下,可更新最新版。如:vuex: "~3.1.3",3.1.3及其以上的3.1.x都是满足的。
  • 无符号:无符号表示固定版本号,例如:vuex: "3.1.3",此时一定是安装3.1.3版本。

但是在使用 yarn install 之后,发现 json-schema-editor-visual 还是安装了一个 antd@3.1.6 的版本,导致了出现版本不一致导致的问题。

图示如下所示:

图片

如何破局

使用 yarn import。

该命令是 yarn 帮助迁移当前所依赖的项目的 package-lock.json,尽可能减少锁文件和现有依赖树之间的差异。

在执行这个时候,还发现了一个报错。

图片

这个问题,我一直认为是 node 版本的问题,结果切换 node 版本一直没法解决,最后还是 Google 帮我解决了问题。从这个 issue 中我找到了答案。

图片

最后我手动修改了 package-lock.json 中的 upath 的版本为 ^1.0.5。

执行 yarn import。终于成功了,泪目。

思考与总结

虽然上面只提到了 antd 的版本不一致导致的问题,实际上还有其他的问题也是由于版本不一致导致的。所以我们在切换包管理的时候,尽可能的保持包版本一致。

一般可以使用官方提供的命令,比如 yarn 的 yarn import​,还有 pnpm 提供的,pnpm import 来处理是最恰当的。

责任编辑:武晓燕 来源: 前端杂货铺
相关推荐

2020-01-06 09:43:14

赔偿TSB迁移

2021-09-05 11:20:04

带宽网络排查

2021-11-01 17:29:02

Windows系统Fork

2020-03-09 11:43:35

RustCargo编程语言

2020-12-03 12:06:54

HarmonyOS

2017-03-20 19:40:29

AndroidSwipeRefres下拉刷新

2017-08-24 17:37:18

DNS缓存分析

2021-07-27 07:12:11

Getter接口Setter

2023-04-17 07:36:28

Arch LinuxGUI

2018-08-23 16:51:40

Linux软件仓库包管理器

2021-01-11 05:30:04

Boot 单机片

2024-05-13 08:37:17

炫技H5UI

2018-12-27 09:09:35

2023-07-13 09:12:37

CNCF项目云原生

2019-11-04 10:37:53

MongoDB宕机日志

2016-09-12 15:00:46

Linux包管理器新手

2010-05-27 10:12:46

openSUSEYaST

2018-10-15 15:00:42

UnixSysget包管理器

2010-10-08 09:26:17

.NET微软

2024-11-12 08:03:27

JavaScript管理器安全
点赞
收藏

51CTO技术栈公众号