js可选链使用时报错Support for the experimental syntax ‘chaining‘ isn‘t currently enabled 问题记录-安装bable依赖及配置

问题回顾 vue2 项目中使用了可选链

let a = videoInfo?.videoUrl ?? '';

然后就报错

解决方案

// 首先安装babel
npm install --save-dev @babel/core @babel/cli @babel/preset-env
// 安装
npm i @babel/plugin-proposal-optional-chaining --save-dev  
// 或者安装指定版本（与上面一条二选一）
npm install  @babel/plugin-proposal-optional-chaining@7.13.12 --save 

安装完毕这些依赖之后
在项目根目录下创建babel.config.js文件
内容如下

module.exports = {
    "presets": [
        [
            "@babel/env",
            {
            "targets": {
                "edge": "17",
                "firefox": "60",
                "chrome": "67",
                "safari": "11.1"
            },
            "useBuiltIns": "entry"
            }
        ]
    ],
    plugins:[
        ["@babel/plugin-proposal-optional-chaining"]  //解析 可选链式语法
    ]
};

重启项目即可
如果报错

Cannot find module ‘@babel/preset-env/lib/utils

原因是@babel/preset-env的版本原因，只要运行下面命令，将@babel/preset-env版本降低至7.12.17就不再报错

npm i @babel/preset-env@7.12.17