Babel6 如何升级 7 #60

简介: Babel6 如何升级 7 #60

巴别塔


$ 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",
            }
        ],
    ]
}

这里引入了,解决按需加载AntAnt

[
    "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

目录
相关文章
|
10月前
|
JavaScript 前端开发 编译器
分享:Babel7的配置
分享:Babel7的配置
221 0
|
5月前
|
JSON 资源调度 前端开发
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
81 0
|
5月前
|
JSON 移动开发 资源调度
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
83 0
|
4月前
|
Web App开发 前端开发 开发工具
Vite 4.0 正式发布!
Vite 4.0 正式发布!
|
4月前
|
JSON Rust JavaScript
Vite 5.0 正式发布
Vite 5.0 正式发布
|
11月前
|
JavaScript API
十问babel,用最简单的话说清楚babel(二)
十问babel,用最简单的话说清楚babel
74 0
|
11月前
|
Web App开发 移动开发 JavaScript
十问babel,用最简单的话说清楚babel(一)
十问babel,用最简单的话说清楚babel
230 0
|
11月前
|
缓存 前端开发 API
Vite 是如何兼容 Rollup 插件生态的
Vite 是如何兼容 Rollup 插件生态的
140 0
|
前端开发
关于我写了一个vite插件那些事
在我们开发的过程中有开发模式和生产模式,那有些测试代码会在开发模式的时候使用,在生产环境要删掉,一般是手动删除,另一种就是判断环境变量,但是环境变量不好处理template代码以及css代码,为此我写了一个插件将解决以上问题。
185 0
关于我写了一个vite插件那些事
|
JavaScript 前端开发 编译器
什么是 Babel?
什么是 Babel?
121 0
什么是 Babel?