current position:Home>How to upgrade react Babel 7.1.0

How to upgrade react Babel 7.1.0

2022-05-15 02:20:12Wang Haihu

react babel upgrade 7.1.0


Let's get to know babel Upgrade to 7.1.0, Have made those changes !
Only general description without detailed explanation , Details please see :https://www.babeljs.cn/docs/v7-migration-api

1、 Removed the following combination , These presets should be replaced by env Preset .
babel-preset-es2015
babel-preset-es2016
babel-preset-es2017babel-preset-latest

2、 Delete @babel/polyfill
@babel/polyfill

3、 Abandoned stage-x
@babel/preset-stage-0
@babel/preset-stage-1
@babel/preset-stage-2
@babel/preset-stage-3

4、 Package rename
{
- “presets”: ["@babel/preset-react"],
+ “presets”: ["@babel/react"], // this is equivalent
- “plugins”: ["@babel/transform-runtime"],
+ “plugins”: ["@babel/plugin-transform-runtime"], // same

}

5、Scoped Packages Scope package of scope
babel-cli -> @babel/cli
babel-core -> @babel/core
babel-preset-env -> @babel/preset-env

package.json change

dependencies: {
- “babel-plugin-syntax-dynamic-import”: “^6.18.0”,
- “babel-polyfill”: “^6.26.0”,
_
+ “core-js”: “^3.6.5”,
+ “regenerator-runtime”: “^0.13.5”,
},
devDependencies: {
- “babel”: “^6.23.0”,
- “babel-core”: “^6.26.3”,
- “babel-eslint”: “^8.0.1”,
- “babel-loader”: “^7.1.5”,
- “babel-plugin-transform-decorators-legacy”: “^1.3.5”,
- “babel-plugin-transform-runtime”: “^6.23.0”,
- “babel-preset-env”: “^1.7.0”,
- “babel-preset-react”: “^6.24.1”,
- “babel-preset-stage-0”: “^6.24.1”,
- “babel-runtime”: “^6.26.0”,
_
+ “@babel/core”: “^7.0.0”
+ “babel-eslint”: “^8.2.6”,
+ “babel-loader”: “^8.1.0”,
+ “@babel/plugin-proposal-decorators”: “^7.10.1”,
+ “@babel/plugin-transform-runtime”: “^7.10.1”,
+ “@babel/preset-env”: “^7.10.2”,
+ “@babel/preset-react”: “^7.10.1”,
+ “@babel/plugin-proposal-class-properties”: “^7.10.1”,
+ “@babel/plugin-proposal-object-rest-spread”: “^7.10.1”,
+ “@babel/plugin-syntax-dynamic-import”: “^7.8.3”,
}

.babelrc

{
    
    "presets": [
        [
            "@babel/env",
            {
    
                "corejs": "3",
                "useBuiltIns": "entry",
                "targets": {
    
                    "chrome": "58",
                    "ie": "10"
                }
            }
        ],
        "@babel/preset-react"
    ],
    "plugins": [
        [
            "@babel/plugin-proposal-decorators", //  Support es7 Decorator 
            {
    
                "legacy": true
            }
        ],
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-class-properties", // Use class new property 
        "@babel/plugin-transform-runtime",
        [
            "import",
            {
    
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css"
            },
            "antd"
        ],
        [
            "import",
            {
    
                "libraryName": "@antd-design/icons",
                "libraryDirectory": "dist/icons",
                "camel2DashComponentName": false
            },
            "@antd-design/icons"
        ],
    ]
}

replace @babel/polyfill

//  Import / export of import file 
import "core-js/stable";
import "regenerator-runtime/runtime";

// .babelrc  Add below 
[
    "@babel/env",
    {
    
        "corejs": "3",
        "useBuiltIns": "entry",
        "targets": {
    
            "chrome": "58",
            "ie": "10"
        }
    }
],

copyright notice
author[Wang Haihu],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120523333465.html

Random recommended