【es6】可选链操作符编译报错 You may need an additional loader to handle the result of these loaders.

最新推荐文章于 2024-12-14 07:00:00 发布

原创最新推荐文章于 2024-12-14 07:00:00 发布 · 7.4k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

Cheecho

关注

标签

#es6 #vue.js #前端

分类前端开发

在Vue项目中遇到使用可选链操作符?.时的编译问题，通过安装@babel/plugin-proposal-optional-chaining插件并在babel.config.js中配置，可以成功处理ES2020的新语法。安装过程中如果出现错误，可能需要调整Node版本或包裹插件名称。确保正确配置后，项目能够支持可选链操作符的语法。

babel可选链操作符?.编译报错
报错信息：

File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

在这里插入图片描述
解决方法：
原文链接：https://blog.csdn.net/roylinziyang/article/details/123280896
可选链操作符是ES2020中推出的新语法，允许我们不需要校验当前属性的类型去尝试访问子属性。

  const a = b?.c?.d

在vue项目中使用可选链操作符语法时会出现编译报错的情况，需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中。

安装

npm install @babel/plugin-proposal-optional-chaining --save-dev

安装过程中可能会出现"源文本中出现无法识别的标记"报错，是由于node版本的问题导致需要使用引号将插件名称包裹。

npm install '@babel/plugin-proposal-optional-chaining' --save-dev

配置
在babel.config.js中添加:

module.exports = {
  presets: ['@vue/app'],
  plugins: ["@babel/plugin-proposal-optional-chaining"]
}