记一次 Bug 引起的 babel 升级

原由

最近参与了一个新的项目，是基于 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， 从新安装依赖，并启动项目，问题解决。

社区提问

这个是我晚上问的，次日早上就有答案了🙏

总结

我本身在解决问题的时候，也老是在第一个、第二个方法上面消耗了太多时间，可是，这两个方法每每是最低效的。若是分配时间的话，应该按以下方式分配：

• 一、 当一个伸手党 （5%）
• 二、 google 搜索 （15%）
• 三、 探究原理，明白到底发生了什么 （20%）
• 四、 开源社区提问（20%）
• 五、 看源码，尝试本身解决（40%）