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

目录
相关文章
|
负载均衡 安全 应用服务中间件
什么是正向代理和反向代理
正向代理是客户端与服务端之间的中介,用于访问受限资源,如V/P/N和动态IP代理,同时可隐藏客户端IP。反向代理则接收客户端请求并转发给后端服务器集群,隐藏真实服务器信息,常用于堡垒机和负载均衡,如nginx。正向代理焦点在客户端,反向代理关注服务端。
|
SQL 分布式计算 监控
MaxCompute提供了一些工具以帮助您监控作业和资源使用情况。
【2月更文挑战第4天】MaxCompute提供了一些工具以帮助您监控作业和资源使用情况。
184 8
|
JSON JavaScript API
【开源打印组件】vue-plugin-hiprint初体验
本文介绍对vue-plugin-hiprint部分重要代码的解析,这是一个很好的开源插件,能够自己自定义打印模板,通过后端传来的数据进行渲染打印,官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。
3860 1
【开源打印组件】vue-plugin-hiprint初体验
|
10月前
|
数据采集 人工智能 API
Qwen2.5-Coder深夜开源炸场,Prompt编程的时代来了!
通义千问团队开源「强大」、「多样」、「实用」的 Qwen2.5-Coder 全系列,致力于持续推动 Open Code LLMs 的发展。
|
SQL 微服务
成功解决 :status 500 reading CouponFeignService#saveSpuBounds(SpuBoundTo)
这篇文章讲述了作者在微服务项目开发中遇到的一个具体问题:使用Feign进行远程服务调用时出现了`status 500`错误。文章详细描述了排查过程,包括检查Feign配置和被调用服务的日志信息,最终确定问题是由于Lombok插件的`@Data`注解导致。作者通过将`@Data`注解注释掉并手动生成get、set方法解决了问题,并提供了成功调用远程服务后的截图。
成功解决 :status 500 reading CouponFeignService#saveSpuBounds(SpuBoundTo)
|
存储 缓存 安全
|
JavaScript
postcss pxtorem 配置
【8月更文挑战第9天】
|
Android开发
基于Amlogic 安卓9.0, 驱动简说(五):基于GPIO、LED子系统的LED驱动
这篇文章是关于如何在基于Amlogic T972的Android 9.0系统上,使用GPIO和LED子系统来实现LED驱动的教程,包括了DTS设备树配置、驱动源码编写以及如何在用户空间控制LED的亮度和开关。
459 0
基于Amlogic 安卓9.0, 驱动简说(五):基于GPIO、LED子系统的LED驱动
|
前端开发 JavaScript 开发者
JavaScript基础-异步编程:回调函数
【6月更文挑战第12天】本文介绍了JavaScript中的异步编程基础,重点讨论回调函数。回调函数是处理延迟操作的关键,常见于事件监听、定时器、Ajax请求和文件操作。然而,它们可能导致回调地狱、错误处理不一致和控制流混乱等问题。为了解决这些问题,文章推荐使用Promise链、async/await来扁平化异步逻辑,并提供了相关代码示例,强调了现代JavaScript特性的优势,以提升代码可读性和可维护性。
250 7
|
消息中间件 存储 网络协议
从零开始掌握进程间通信:管道、信号、消息队列、共享内存大揭秘
在操作系统中,进程间通信(IPC)是至关重要的,它提供了多种机制来实现不同进程间的数据交换和同步。本篇文章将详细介绍几种常见的IPC方式,包括管道、信号、消息队列、共享内存、信号量和套接字,帮助你深入理解并合理应用这些通信方式,提高系统性能与可靠性。
674 0