文章目录
- 一、前言
- 三、babel 详解
- 四、拓展阅读
一、前言
项目开发阶段，使用可选链操作符 ?. 出现以下编译报错问题：
分析：由于可选链操作符 ?. 是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 学习资料汇总》
