记一次 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,我们找到了三个答案:

此时,还没有直接的答案。但是,已经可以把答案锁定在:「升级 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%)
原文链接:segmentfault.com

上一篇:给年轻程序员们的10点启示
下一篇:【Day 7】云开发0基础训练营

相关推荐

  • 那些 JavaScript 自带的奇妙 Bug

    米娜桑,哦哈哟~本章讲解关于 JavaScript 奇妙的 Bug,与其说是Bug,不如说是语言本身隐藏的奥秘。接下来就看看可能会影响到我们编程的那些Bug吧。 typeof null === "ob...

    8 个月前
  • 输入框只能允许数字(解决type="number"中的bug)

    <input type="tel" value="num" oninput="num.replace(/[^\d]/g,'')" /> <input type="text" valu...

    4 个月前
  • 谈谈常用Babel配置与babel-preset-env

    1.Babel是什么 ​ “The compiler for writing next generation JavaScript” ​ 简单翻译下就是“用于编写下一代JavaScript的编译器”...

    2 年前
  • 调试WebPACK,ES6和Babel

    ZenMaster提出了一个问题:Debugging with webpack, ES6 and Babel,或许与您遇到的问题类似。 回答者Jamie Treworgy给出了该问题的处理方式: Th...

    3 年前
  • 详解webpack babel的配置

    Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,……)代码,即使当前浏览器没有完成支持;...

    3 年前
  • 详解Webpack+Babel+React开发环境的搭建的

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS、Babel、Coffeescript、Less/Sass等)...

    3 年前
  • 记数组sort方法与字符串比较引起的Bug

    前言 前几天使用JavaScript中Array的sort排序字符串,发现排序不准确,这里记一下。 第一版 var arr = ['0', '1', '11', '11', '2', '12', '...

    3 年前
  • 记录:admin-iview项目使用添加了babel-polyfill在ie下依然main.js报错页面一片空白的解决办法

    一、兼容IE10+,只需要安装babel-polyfill,然后在main.js引入即可,详细步骤如下: 1、使用cnpm:cnpm i babel-polyfill 2、在main.js中引入 im...

    2 年前
  • 记录开发项目中遇到的BUG

    项目组沙雕组员 自己在本地写完,还没有 $ git add . $ git commit -m "xxxxxx" 进行本地托管,就直接咔咔咔 $ git pull 一顿猛如虎的操作结束了之后,告诉我...

    2 年前
  • 记一次bug经历-document.title

    身为一个前端打字员,一直没有写博客的习惯,但是,今儿是忍不了了,且为自个儿今后提个醒。 最近用vue全家桶开发了一个网站,眼看一切都顺顺利利的,马上都要领盒饭了,突然发现一个bug,当我点击其他的标签...

    2 年前

官方社区

扫码加入 JavaScript 社区