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

目录
相关文章
|
JavaScript 前端开发 编译器
分享:Babel7的配置
分享:Babel7的配置
296 0
|
2月前
|
JavaScript 前端开发
如何在项目中集成 Babel?
如何在项目中集成 Babel?
44 3
|
2月前
|
JavaScript 前端开发 安全
Babel 插件的未来发展趋势是什么?
Babel 插件的未来发展趋势是什么?
47 4
|
2月前
|
JavaScript 前端开发
将 Babel 插件应用于实际项目中
【10月更文挑战第25天】如果在应用插件过程中出现问题,可以检查 Babel 配置是否正确、插件的依赖是否安装完整、构建工具的集成是否正确等,逐步排查和解决问题。通过以上步骤,就可以将 Babel 插件成功应用到实际项目中,实现特定的代码转换和功能增强。
|
8月前
|
JSON 资源调度 前端开发
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
262 0
|
8月前
|
JSON 移动开发 资源调度
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
475 0
|
7月前
|
JavaScript 前端开发 API
你好,babel
你好,babel
|
8月前
|
编解码 JSON JavaScript
babel的学习
babel的学习
49 0
|
JavaScript 前端开发 网络架构
TypeScript - 升级篇2
TypeScript - 升级篇
|
JavaScript
TypeScript - 升级篇1
TypeScript - 升级篇

热门文章

最新文章

下一篇
开通oss服务