记一次debug过程

Posted 2021-09-13 HaHa

对个人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

完。