【vue-cli】使用es6的可选链?.操作符报错Module parse failed解决记录

使用场景：发现项目有些旧代码多层调用某个对象的属性，由于目标对象可能没那个属性，就导致报错，之前研究es6新特性时发现可以用?.来判断某个对象是否有某个属性来赋值。

测试源代码：

var a = {
  name: 'hello'
}
var b = a?.name;

console.log('a',a,'b',b)

在vue-cli中发现用不了：

后面尝试去解决，成功后浏览器控制台能打印出来

解决过程

因为我们这个项目是用的vue-element-admin,我自己在另外一个vue-cli工程发现?.语法是可以用的，所以研究了一下为什么目前项目用不了，对比了一下package.json里的依赖，发现 “@vue/cli-plugin-babel”: “3.5.3”,而另外可用该语法的项目里是："@vue/cli-plugin-babel": “~4.5.0”

所以我把升级了该依赖，不用写死的3.5.3版本了，写成 "@vue/cli-plugin-babel": "^4.0.0"后，删除了node_modules文件夹，使用淘宝镜像cnpm install命令重新安装了node_module依赖后，?.语法成功了。

并看到我的测试源代码编译为es5后的源代码是：

关于版本补充：

鉴于使用了 semver（语义版本控制），所有的版本都有 3 个数字，第1个是主版本，第2个是次版本，第3个是补丁版本，具有以下规则：

~: 如果写入的是 〜0.13.0，则只更新补丁版本：即 0.13.1 可以，但 0.14.0 不可以。
^: 如果写入的是 ^0.13.0，则要更新补丁版本和次版本：即 0.13.1、0.14.0、依此类推。
*: 如果写入的是 *，则表示接受所有的更新，包括主版本升级。
>: 接受高于指定版本的任何版本。
>=: 接受等于或高于指定版本的任何版本。
<=: 接受等于或低于指定版本的任何版本。
<: 接受低于指定版本的任何版本。

还有其他的规则：
无符号: 仅接受指定的特定版本。
latest: 使用可用的最新版本。

npm view 依赖包 versions: 查看依赖包的所有版本

如：

npm view @vue/cli-plugin-babel versions 就是看 @vue/cli-plugin-babel 的所有版本

更多参考：
MDN可选链操作符?.