关于javascript:记一次debug过程

对集体 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

完。