Babel/Plugin -JS支持ES6新语法[可选链操作符/空值合并操作符/空值合并操作符]

最近在学习ES最新几个版本的新特性的时候发现 **?.**可选链操作符, **??**空值合并操作符, **??=**空值合并操作符等。
大致的演示一下用法：

?. 可选链操作符

var obj = {
  a: 1
},
obj.a // 1
obj.b // undefined
obj.a.b // undefined
obj.b.c // Error报错
obj?.b?.c // undefined
// 允许我们深层的检索有没有该属性

?? 空值合并运算符

//  当左侧的值为null和undefined的时候则返回右侧的值 否则返回左侧的值
var reg = null;
var res = reg ?? 0;
// 空值合并运算符具有倒数第五的 运算符优先级，直接低于||和直接高于 条件（三元）运算符。

??= 逻辑空值赋值运算符

// x ??= y 仅在 x 是 nullish (null 或 undefined) 时对其赋值
var obj = {
  a: 1,
}
obj.b ??= 2
obj.b // 2

当然，虽然浏览器能够认识这些新的运算符，但是项目中使用必须@babel/plugins转化才能使用。
想使用 ** ?. ** 运算符 ，必须安装 @babel/plugin-proposal-optional-chaining
想使用 ?? 运算符 ，必须安装 @babel/plugin-proposal-nullish-coalescing-operator
想使用 ??= 运算符 ，必须安装 @babel/plugin-proposal-logical-assignment-operators

babel.config.js配置

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