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

​背景

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

七台河网站建设公司创新互联,七台河网站设计制作，有大型网站制作公司丰富经验。已为七台河1000+提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的七台河做网站的公司定做！

问题

结果我发现之前还好好的项目，突然就出现各种问题，其中一个问题是 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 来处理是最恰当的。

网站题目：记录一次切换包管理器引发的血案
网站地址：http://www.36103.cn/qtweb/news0/34100.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联