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不会出问题，指向数据都能直接显示出来，
但是async的箭头函数方法中的this在调试中显示undefined，但是并不会影响实际的代码运行，
实际的代码运行也能取到this中的数据和方法，用console.log(this)也能出现this的实际数据，
虽然这样并不会影响实际的代码，但是调试的时候就会比较难受，因此就需要对.babelrc进行修改，如下：
{
"presets": [
["@babel/env",
{
"targets": { // 重点配置
"chrome": "73"
}
}
],
"@babel/react"
],
"plugins": [
]
}
