记一次 Bug 引发的 babel 升级

文章同时发布与 segmentfault 和 掘金

起因

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

解决思路

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

当一个伸手党

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

google 搜索

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

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

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

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

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

• react-router issues/6648 ：升级 react 以及 react-scripts 至最新版，并重新安装依赖。（尝试之后，无用）
• babel issues/9746：大概就是，需要升级 babel，并更新配置即可。
• babel JS file can't resolve “@babel/runtime/helpers/builtin/classCallCheck” ：也是升级 babel，并更新配置即可。

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

探究原理

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

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

npx babel-upgrade

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

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

看源码

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

社区提问

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

总结

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

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