Babel6 如何升级 7

[xuya227939]

Babel

$ npm install babel-upgrade -g
$ babel-upgrade --write

然后会发现package.json依赖包，自动给转换到了最新版。

Babel7新增了babel.config.js，这里我没有用到，所以还是选择使用.babelrc文件。 最终配置如下

{
    "presets": [
        [
            "@babel/env",
            {
                "targets": {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1"
                },
                "useBuiltIns": "usage"
            }
        ],
        [
            "@babel/preset-react",
        ],
    ],
    "plugins": [
        ["@babel/plugin-proposal-class-properties"],
        ["@babel/plugin-transform-runtime"],
        ["@babel/plugin-syntax-import-meta"],
        ["@babel/plugin-syntax-dynamic-import"],
        ["@babel/plugin-proposal-json-strings"],
        [
            "import", {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css",
            }
        ],
    ]
}

这里引入了Ant，解决Ant按需加载

[
    "import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css",
    }
],

Webpack配置如下

module: {
    rules: [
        {
            test: /\.js|jsx$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
        },
    ],
},

遇到的坑

无法识别JSX语法，因为在.babelrc文件中没有引入@babel/preset-react

完美升级babel7