记一次 Bug 引发的 babel 升级

6
文章同时发布与 segmentfault掘金

起因

最近参与了一个新的项目,是基于 React + Antd + Ts + Mobx 来写的。项目安装完依赖之后,启动的时候会看到控制台报错:

image

解决思路

  • 当一个伸手党
  • google 搜索
  • 探究原理,明白到底发生了什么
  • 看源码,尝试自己解决
  • 开源社区提问

当一个伸手党

这是我最喜欢的方式了,可是基本上没啥用..

image

google 搜索

这种解决问题的方法就是把遇到的问题提取关键词,坚信我一定不是第一个碰到此问题的人,然后借助 google 等搜索引擎寻求帮助。

这个方法,有两个点需要注意,第一个就是关键词的提取,一定要准确;第二个,要冷静,不要相信大力出奇迹,我一定能搜到答案。

通过上图,我们可以观察到,是 react-router-dom 引用的 history.js 找不到一个 babel 的引用导致的。于是,我们搜索:

react-router Can't resolve '@babel/runtime/helpers/esm/extends'

关掉 csdn 的答案,以及一些不相关的 github issues,我们找到了三个答案:

此时,还没有直接的答案。但是,已经可以把答案锁定在:「升级 babel,并更新配置即可」。

探究原理

Babel 是一个工具链,主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码。 --摘自官网

因为参加项目的配置已经升级到了 babel7.x ,查看官网,可以看到 升级到 Babel7 的指南。所以,这里可以先根据指南来检查现有的配置,看看是否符合预期。

npx babel-upgrade

可以看到,运行升级之后,不仅帮我们改了 babel 相关依赖,还自动改写了 babel 的配置;

image

image

安装依赖,并启动项目,然后发现问题并没有解决。

看源码

通过报错信息,不难看出,是 history.js 的报错。通过 react-router-dom 对应的版本找到 history.js的版本。 并下载相应部分的源码,根据这个版本的源码中 package.json 中的依赖来修改项目中的依赖。移除 node_modules, 重新安装依赖,并启动项目,问题解决。

社区提问

31569384027_ pic

这个是我晚上问的,第二天早上就有答案了🙏

总结

我自己在解决问题的时候,也总是在第一个、第二个方法上面消耗了太多时间,但是,这两个方法往往是最低效的。如果分配时间的话,应该按如下方式分配:

  • 1、 当一个伸手党 (5%)
  • 2、 google 搜索 (15%)
  • 3、 探究原理,明白到底发生了什么 (20%)
  • 4、 开源社区提问(20%)
  • 5、 看源码,尝试自己解决(40%)

你可能感兴趣的

载入中...