背景
在前端开发中，我们常常会使用 Babel 编译 ES6 代码，从而在现代浏览器中运行。然而，在使用 Babel 进行编译时，有时候会出现 TypeError: Cannot read property 'resolve' of undefined 错误，这个错误会影响开发效率，让人十分头疼。
原因
造成该错误的原因是 Babel 的依赖项 @babel/core 与 webpack 的依赖项 webpack 版本不兼容。具体原因是 @babel/core 包中使用了 webpack 5.x 中的一个函数 webpack.util.parseJson，这个函数在 webpack 4.x 中是不存在的，从而导致了该错误。
解决方法
解决该错误的方法有两种，分别是升级 webpack 到 5.x 版本和降级 @babel/core 的版本。
升级 webpack 到 5.x 版本
如果你的项目中正在使用 webpack 4.x 版本，你可以直接升级 webpack 到 5.x 版本以解决该错误。具体方法如下：
安装最新版本的
webpack包：npm install webpack --save-dev修改
webpack.config.js文件中的配置：-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ------ ----------------- ------- - --------- ------------ ----- ----------------------- -------- -- ------- - ------ - - ----- -------- -------- ---------------------------------- ---- - ------- --------------- -------- - -------- ---------------------- -- -- -- -- -- --我们修改了
module.rules.use.options.presets的值，将其改为['@babel/preset-env']。在项目中安装最新版本的
@babel/preset-env包：npm install @babel/preset-env --save-dev如果你之前使用了其他
@babel包，请更新到最新版本。
降级 @babel/core 的版本
如果你不想升级 webpack 的版本，你也可以降级 @babel/core 的版本。具体方法如下：
安装
@babel/core的 7.10.0 版本：npm install @babel/core@7.10.0 --save-dev在项目中安装
@babel/preset-env和其他@babel包的 7.10.0 版本：npm install @babel/preset-env@7.10.0 @babel/plugin-proposal-class-properties@7.10.0 --save-dev修改
babel.config.js文件中的配置：module.exports = { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-proposal-class-properties'], };
总结
解决 Babel 编译 ES6 代码时出现的 TypeError：Cannot read property 'resolve' of undefined 错误，有两种方法：升级 webpack 到 5.x 版本或者降级 @babel/core 的版本。具体该如何选择，需要根据项目情况来决定，但无论哪种方法，我们都需要时刻关注这些工具的版本兼容性，避免出现各种奇怪的错误。
示例代码
下面是一个使用了 ES6 语法的示例文件：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
------- -
---------------- -- ---- -- ------------- --- ----------- ----- -------
-
-
----- - - --- ------------- ----
----------如果你在使用 Babel 编译该文件时出现了 Cannot read property 'resolve' of undefined 错误，请根据上文的内容进行相应的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e95f0df6b2d6eab34abbe1