一、前言

项目开发阶段，使用可选链操作符 ?. 出现以下编译报错问题：

分析：由于可选链操作符 ?. 是ES2020（即ES11）中推出的新语法，允许我们不需要校验当前属性的类型就可去尝试访问子属性。

例如：let str = a?.b?.c;

以上错误正是由于项目中无法解析可选链操作符等新的ES属性方法，如上图所示， 这时需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中。

babel.config.js 配置信息如下：

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

三、babel 详解

Vue 项目根目录中存在babel..config.js文件，即为Babel的配置文件，作用于整个项目。Vue项目中普遍使用ES6语法，若要求兼容低版本浏览器，就需要引入Babel，将ES6转换为ES5。

四、拓展阅读

• Babel中文文档
• MDN可选链操作符?.
• 《JavaScript进阶（十三）：JavaScript 空值合并运算符、可选链操作符、空值赋值运算符讲解》
• 《Vue进阶（五十一）： vue-cli 脚手架 webpack.base.conf.js 配置文件讲解》
• 《Vue进阶（一）：Vue 学习资料汇总》