記一次 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%）