在vue中使用ES6链判断和合并运算符

在vue中使用ES6新增功能链判断和合并运算符，如下代码

// 链判断
let obj = {}
if (obj?.name) {
	console.log("是否存在name属性")
}
// 合并运算符  判断是否为 null 或 undefined
if (value1 ?? value2) {
}

在vue中这样使用会报错，原因是在解析过程中无法解析?.或??,需要在配置babel相应配置，如下。
安装改babel插件

// 链判断
npm
npm install --save-dev @babel/plugin-proposal-optional-chaining
yarn
yarn add @babel/plugin-proposal-optional-chaining --dev
// 合并运算符
npm
npm install  @babel/plugin-proposal-nullish-coalescing-operator --save
yarn
yarn add @babel/plugin-proposal-nullish-coalescing-operator --save

在根目录下babel.config.js或.babelrc文件中的plugins添加该插件。

{
  "presets": [
    "@vue/app"
  ],
  "plugins": [
  	// 链判断
    "@babel/plugin-proposal-optional-chaining"
    // 合并运算符
    '@babel/plugin-proposal-nullish-coalescing-operator'
  ]
}

重启项目即可使用ES6中链判断和合并运算符。