?. 语法报错 - 技术栈

?. 语法报错

边中之城2023-11-20 10:37

报错

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，如下：

javascript 复制代码

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、重启项目