记一次debug过程

HaHa
English
对个人debug的一次回顾,没啥干货

背景

前几天部门来了个新人,接手了一个我没参与过的老项目,项目么就是一个普通的vue脚手架起的项目,但是装完依赖后却跑不起来,便求助于我。

开始

先看下报错信息:

error in ./node_modules/vconsole/dist/vconsole.min.js

Module parse failed: Unexpected token (10:79312).You may need an appropriate loader to handle this file type.

看到报错信息我直观的认为是webpack配置问题,直接就开始google大法了,简单的搜索和尝试之后无果,且自身对webpack也不甚熟悉。

随后换了一个方向:因为是老项目,代码有一段时间没有改过了,为何突然跑不起来? 报错的是vconsole,是不是它出了问题?

手动安装了老板本,无报错。基本锁定是新版本的问题,查看vconsolepackage.json历史commit,新版引入了新依赖copy-text-to-clipboard以及一些babel插件更新。 看了下copy-text-to-clipboard源码,就一个js文件,没发现有啥特殊。

折腾了一番后陷入了僵局。。。

随后抱着尝试的心态在报错文件中去定位具体代码(正常情况下这一步应该第一时间去做,但是这是一个压缩后的js文件,直觉告诉我看了也没用...),发现报错的代码类似:

try{}catch{}

嗯?catch后面未携带参数? 搜了下发现是es2019的提案,babel7已经支持。而公司的项目用的是babel6+

哦~原来如此!接下来就简单了,有2种解决方式:

  1. 降级vconsole,毕竟新版没有什么我特别想要的功能
  2. 升级项目的babel依赖,看了下Babel升级文档,有一些望而却步...

那就用方法1吧。呵!又一个“难题”被我解决了,又是枯燥的一天(狗头

....

不对!vconsole.min.js已经经过一次打包了,为什么还会出现如此“高级”的代码?vconsole项目用的也正是babel7+

克隆一波源码,本地编译了一下。发现打出的包与npm上的一致(废话)

而根据.babelrc文件可知,项目用的是@babel/preset-env,文档上也说@babel/preset-env已经包含了@babel/plugin-proposal-optional-catch-binding。通过Babel在线验证了一波,编译出的代码确实符合预期:

// before
try {} catch{}

// after
try {} catch (_unused) {}

一番尝试摸索后发现,直接在webpack中配置babel-loader相关options是有效果的,而修改.babelrc则无效。也确实有搜到有人说babelrc文件配置无效,兴许是babel的bug?

随后便顺手给vconsole提了一个PR。本质就是加载.babelrc文件,解析成js对象,最后手动将该对象作为babel-loader的options。PR很快得到了回复以及合并。

事情到这里差不多就结束了。但是.babelrc无用这个问题让我感到很不解,Babel那么大的大哥,会出现这种问题吗?

又翻了翻Babel文档,才发现不是babelrc无用,是用!错!了!(捂脸

细节可以看文档,简单来说就是babel.config.json对应项目级别的配置;.babelrc对应文件级别,且需要配置filename才能起作用。

所以正确又优雅的修改方式应该是直接将.babelrc文件重命名为babel.config.json

完。

阅读 157

前端哈哈
一个存放前端新人写的前端文章的前端专栏
509 声望
11 粉丝
0 条评论
你知道吗?

509 声望
11 粉丝
宣传栏