?. 语法报错

边中之城

于 2023-11-16 20:33:03 发布

阅读量1.5k

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_41886421/article/details/134450182

版权

文章讲述了在Vue项目中遇到关于‘optionalChaining’实验性语法错误的解决方案，需在Babel配置文件中添加相关插件，并根据生产环境启用或禁用特定功能，如console和懒加载AntDesignVue组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错

Syntax Error: SyntaxError: E:xxx\src\views\xxx.vue: Support for the experimental syntax ‘optionalChaining’ isn’t currently enabled (173:27):

171 | label: node.label,
172 | style: {
173 | fill: colorSet?.mainFill || ‘#DEE9FF’,
| ^
174 | stroke: colorSet?.mainStroke || ‘#5B8FF9’,
175 | },
176 | labelCfg: {

Add @babel/plugin-proposal-optional-chaining (https://git.io/vb4Sk) to the ‘plugins’ section of your Babel config to enable transformation.

原因

控制台也提示了，缺个语法解析的包 @babel/plugin-proposal-optional-chaining

解决办法

1、yarn add @babel/plugin-proposal-optional-chaining
2、babel.config.js中添加 plugins，如下：

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)


const plugins = ['@babel/plugin-proposal-optional-chaining']
if (IS_PROD) {
  plugins.push('transform-remove-console')
}


// lazy load ant-design-vue
// if your use import on Demand, Use this code
plugins.push([
  'import',
  {
    libraryName: 'ant-design-vue',
    libraryDirectory: 'es',
    style: true, // `style: true` 会加载 less 文件
  },
])


module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry',
        corejs: 3,
      },
    ],
  ],
  plugins,
}

3、重启项目