Remember a debug process

A review of personal debug, nothing dry

background

A few days ago, a newcomer from the department came and took over an old project that I had not participated in. The project is just an ordinary Vue scaffolding project, but after installing the dependencies, it can't run, so I turned to me for help.

begin

First look at the error message:

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.

Seeing the error message, I intuitively thought it was a webpack configuration problem, so I started Google Dafa directly. After a simple search and trial, I didn't get any results, and I am not familiar with webpack.

Then changed a direction: because it is an old project, the code has not been changed for a while, why can't it run suddenly? The error is vconsole, is it something wrong?

The boss book was installed manually, no error was reported. Basic locking is a problem with the new version. Check vconsole package.json historical commit. The new version introduces a new dependency copy-text-to-clipboard and some babel plugin updates. I looked at the copy-text-to-clipboard , only one js file, but nothing special was found.

After tossing for a while, it fell into a deadlock. . .

Then, with the mentality of trying, locate the specific code in the error file (normally this step should be done as soon as possible, but this is a compressed js file, and my intuition tells me it’s useless to read it...), It is found that the error code is similar:

try{}catch{}

Ok? No parameters are carried after catch? Search found to be under the proposal es2019, babel7 has support . And the company’s project uses babel6+

Oh~ That's it! The next step is simple, there are two solutions:

1. Downgrade vconsole, after all, the new version does not have any features that I particularly want
2. The babel dependency of the upgrade project, I read the Babel upgrade document , some are daunting...

Then use method 1. Ah! Another "problem" was solved by me, another boring day (dog head

....

wrong! vconsole.min.js has been packaged once, why does the "advanced" code appear? vconsole project uses babel7+

Clone a wave of source code and compile it locally. Found that the typed package is consistent with the one on npm (nonsense)

According to the .babelrc file, the project uses @babel/preset-env , and the document also says that @babel/preset-env already contains @babel/plugin-proposal-optional-catch-binding . Through Babel online verified a wave, the compiled code indeed meets expectations:

// before
try {} catch{}

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

After some attempts, I found that it is webpack to configure babel-loader related options directly in 0609b52ced7690, while modifying .babelrc is invalid. It is true that some people say that the configuration of the babelrc file is invalid, maybe it is a bug in babel?

Then he vconsole over a PR . The essence is to load the .babelrc file, parse it into a js object, and finally manually use the object as the options of babel-loader PR quickly got a reply and merged.

The matter is almost over here. But .babelrc useless makes me feel very puzzled. Will such a problem occur for a big brother Babel

After Babel document , I found that it's not that babelrc is useless, it's useful! wrong! Up! (Cover face

For details, please refer to the document. Simply put, babel.config.json corresponds to the project-level configuration; .babelrc corresponds to the file level, and filename needs to be configured to work.

So the correct and elegant way to modify should be to directly rename the .babelrc file to babel.config.json

Finish.