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
|
3天前
|
JSON 资源调度 前端开发
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
81 0
|
3天前
|
JSON 移动开发 资源调度
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
83 0
|
2天前
|
编解码 JSON JavaScript
babel的学习
babel的学习
9 0
|
3天前
|
JSON Rust JavaScript
Vite 5.0 正式发布
Vite 5.0 正式发布
|
3天前
|
Web App开发 前端开发 开发工具
Vite 4.0 正式发布!
Vite 4.0 正式发布!
|
11月前
|
Web App开发 移动开发 JavaScript
十问babel,用最简单的话说清楚babel(一)
十问babel,用最简单的话说清楚babel
230 0
|
11月前
|
JavaScript API
十问babel,用最简单的话说清楚babel(二)
十问babel,用最简单的话说清楚babel
74 0
|
11月前
|
存储 缓存 资源调度
Vite 是如何发布 npm 包的?
Vite 是如何发布 npm 包的?
294 1
|
JSON 自然语言处理 JavaScript
浅谈babel原理
很早之前就听同事分享了babel原理,其核心就是 AST(Abstract Syntax Tree),今天将自己所了解的知识点简单整理记录一下。