react babel升级7.1.0


让我们了解一下babel升级到7.1.0,都做了那些改变 !
只大体描述不做细节讲解,详情请看:https://www.babeljs.cn/docs/v7-migration-api

1、移除了以下的组合,这些预设应替换为env预设。
babel-preset-es2015
babel-preset-es2016
babel-preset-es2017babel-preset-latest

2、删除 @babel/polyfill
@babel/polyfill

3、弃用了 stage-x
@babel/preset-stage-0
@babel/preset-stage-1
@babel/preset-stage-2
@babel/preset-stage-3

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

}

5、Scoped Packages 作用域的范围包
babel-cli -> @babel/cli
babel-core -> @babel/core
babel-preset-env -> @babel/preset-env

package.json 更改

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", // 支持es7装饰器
            {
                "legacy": true
            }
        ],
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-class-properties", //使用class新属性
        "@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"
        ],
    ]
}

替代 @babel/polyfill

// 入口文件出引入
import "core-js/stable";
import "regenerator-runtime/runtime";

// .babelrc 下添加
[
    "@babel/env",
    {
        "corejs": "3",
        "useBuiltIns": "entry",
        "targets": {
            "chrome": "58",
            "ie": "10"
        }
    }
],
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐