共计 1260 个字符,预计需要花费 4 分钟才能阅读完成。
文章同时发布与 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%)