babel-loader7升级为8的步骤及其遇到的坑

babel-loader7升级为8相关的依赖项也需要同步升级进行兼容，要不然会出现不兼容的情况；
先卸载已存在的
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-loader": "^7.1.5",
npm uninstall babel-core
npm uninstall babel-preset-env
npm uninstall babel-preset-react
npm uninstall babel-loader

babel-loader7升级为8之后需要兼容升级的依赖项

"@babel/core": "^7.17.8",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"babel-loader": "^8.0.5",
进行新版本的安装：
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/preset-react
npm install --save-dev babel-loader

也可以直接删掉依赖文件夹node_modules，然后在package.json文件中的devDependencies中加入
"@babel/core": "^7.17.8",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"babel-loader": "^8.0.5",
这些依赖文件，之后用npm install跑一下之后，也能重新生成最新的依赖，不过记得把低版本babel-loader7及其相关依赖删掉之后再跑npm install，

以上就是如何将babel-loader7升级为8及其可能遇到的问题的解决方式了；

并且.babelrc文件里面加上
{
    "presets": [
        "@babel/env", "@babel/react"
    ],
    "plugins": [
    ]
}
升级之后，如果打debugger进入调试，一般的箭头函数中的this不会出问题，指向数据都能直接显示出来，("wei   xin：【月影WEB】")
但是async的箭头函数方法中的this在调试中显示undefined，但是并不会影响实际的代码运行，
实际的代码运行也能取到this中的数据和方法，用console.log(this)也能出现this的实际数据，
虽然这样并不会影响实际的代码，但是调试的时候就会比较难受，因此就需要对.babelrc进行修改，如下：
{
    "presets": [
        ["@babel/env",
            {
              "targets": { // 重点配置
                "chrome": "73"
              }
            }
        ],
        "@babel/react"
    ],
    "plugins": [
    ]
}

关注微信公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；