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

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”: [

    ]

}