Vue项目配置Babel支持optional-chaining的解决方案求助

1. 安装Babel语法插件 #

你的Vue CLI 3.x版本自带的Babel预设不支持编译*可选链操作符（optional-chaining）*这类ES2020语法，先安装对应插件：

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

（后者是可选链常用的配套空值合并操作符插件，一并安装可避免后续同类语法报错）

2. 更新Babel配置 #

修改babel.config.js，加入插件配置：

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

3. 配置需要编译的依赖包 #

Vue CLI默认跳过node_modules目录下文件的编译，因此需要指定包含可选链语法的依赖包让Babel处理。编辑vue.config.js添加transpileDependencies字段：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  chainWebpack: config => {
    config.plugins.delete("prefetch");
  },
  devServer: {
    port: 9001
  },
  // 替换为实际包含问题代码的依赖包名，多个包用数组形式
  transpileDependencies: ['package-name-1', 'package-name-2']
}

若不确定具体依赖包，可临时用正则匹配（不推荐，会降低编译速度）：

transpileDependencies: [/node_modules\/(xxx.*)/]

4. 重启开发服务 #

执行npm run dev即可正常编译项目。

内容的提问来源于stack exchange，提问作者Raj Patil