webpack4-react-babel7-antd框架的babelrc文件配置写法

2023-11-02

babelrc文件配置写法
webpack2+babel6的babelrc文件配置

    "presets": [
        ["env", 
        { "modules": false }],
        "stage-0",
        "stage-2",
        "react"
    ],
        "plugins": [
        "react-hot-loader/babel",
        "transform-decorators-legacy",
        [
            "import", [{
                "style": "css",
                "libraryName": "antd-mobile"
            },// 这里会和babel7有差别
             {
                "style": "css",
                "libraryName": "antd"
          }// 这里会和babel7有差别
          ]
        ]
    ],

webpack4+babel7的babelrc文件配置
babel7所以引入方式有改变,旧:“env”,新: “@babel/preset-env”,自己可以观察对比。
着重说一下,antd和antd-mobile的引入,和之前写法不一样,之前一个数组里可以用多个对象引入。
现在一个数组只引入一个,数组里面第三个元素就是name是必须写的。
[“import”,
{ “libraryName”: “antd”, “libraryDirectory”: “lib”, “style”: “css”},
“ant”
],

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": false,
        }
      ],
      "@babel/preset-react"
    ],
    "plugins": [
			// Stage 0
		    "@babel/plugin-proposal-function-bind",
		
		    // Stage 1
		    "@babel/plugin-proposal-export-default-from",
		    "@babel/plugin-proposal-logical-assignment-operators",
		    ["@babel/plugin-proposal-optional-chaining", { loose: false }],
		    ["@babel/plugin-proposal-pipeline-operator", { proposal: "minimal" }],
		    ["@babel/plugin-proposal-nullish-coalescing-operator", { loose: false }],
		    "@babel/plugin-proposal-do-expressions",
		    // Stage 2
		    ["@babel/plugin-proposal-decorators", { legacy: true }],
		    "@babel/plugin-proposal-function-sent",
		    "@babel/plugin-proposal-export-namespace-from",
		    "@babel/plugin-proposal-numeric-separator",
		    "@babel/plugin-proposal-throw-expressions",	
		    // Stage 3
		    "@babel/plugin-syntax-dynamic-import",
		    "@babel/plugin-syntax-import-meta",
		    ["@babel/plugin-proposal-class-properties", { loose: false }],
		    "@babel/plugin-proposal-json-strings",
		  ],
      "@babel/transform-runtime",
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-syntax-dynamic-import",
      "react-hot-loader/babel",
       ["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": "css"}, "ant"],//比较大的不同
       ["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib", "style": "css"}, "antd-mobile"]// 比较大的不同
    ]
  }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

webpack4-react-babel7-antd框架的babelrc文件配置写法 的相关文章

随机推荐

  • 2023暑期实习历程总结

    一 前言 Hello 大家好久不见 已经三个月左右没有更新了 那我这三个月在干什么呢 自2023年3月中旬开始到现在五月底这期间接近三个月的时间里 我一直在进行2023暑期实习的投递和面试 这期间投递了包括各大中厂 阿里 腾讯 蚂蚁 美团
  • Jmter的安装及使用

    Jmter的安装 浏览器下载安装解压 解压后控制台输入控制命令cmd 将解压后的jmter bin文件夹下的jmter bat拖入控制台 打开jmter 使用Jmter 在jmter中可以添加各种测试 这是一个抗压测试 各种功能测试可以百度
  • SIP协议-02 原理讲解

    文章目录 1 SIP实现机制 2 SIP网络元素 2 1 用户代理 2 2 代理服务器 2 3 重定向服务器 2 4 位置服务器 2 5 注册服务器 3 SIP中的几个重要概念 3 1 Messages 消息 3 2 Dialog 对话 3
  • PLSQL Developer安装配置教程(超详细)

    前言 首先要有oracle数据库或者有oracle服务器 才可以实现使用PLSQL Developer 工具连接到oracle数据库进行开发 1 下载 PLSQL Developer 链接 https pan baidu com s 1zV
  • 是科研人就要快!加速你的算法!

    在科研中 大多数论文其实还是看精度和效果的 对于速度其实没有那么高的追求 很多人用速度评价自己算法的复杂度很低 但实际上这是不准确的 当然在精度占优的情况下 能够提高速度 给自己的实验结果增彩 关于算法程序的加速 在动手前先要按照如下流程进
  • Linux下的iptables防火墙管理方法

    Linux下的iptables防火墙管理方法 文章目录 Linux下的iptables防火墙管理方法 1 什么是iptables 2 iptables命令参数 3 iptables策略 4 iptables地址转发 5 iptables端口
  • VUE中使用RSA加密

    一 安装 npm install jsencrypt save 二 在main js中引用依赖 导入RSA加密 import JSEncrypt from jsencrypt Vue prototype getRsaCode functio
  • 6种延时队列的实现方案

    延时队列的应用 什么是延时队列 顾名思义 首先它要具有队列的特性 再给它附加一个延迟消费队列消息的功能 也就是说可以指定队列中的消息在哪个时间点被消费 延时队列在项目中的应用还是比较多的 尤其像电商类平台 订单成功后 在30分钟内没有支付
  • 一级二级菜单slideToggle

  • 最短路径之迪克斯特拉(Dijkstra)算法

    何谓最短路径 顾名思义就是在一个图中 一个顶点到另外一个顶点的最短距离拉 那么这里有一点要注意 就是在网图中 边的权值各不相同 最短路径指的是俩点之间的连线权值最小 在非网图 边的权值都默认为1 中最短路径指的是边数最少的 从一个顶点到其余
  • 3D Vision--生成空间任意圆柱及任意直线

    contents 写在前面 几何原理 圆柱的方程 用于拟合已有圆柱 圆柱空间参数方程 用于生成圆柱 python代码 生成结果 完 写在前面 1 内容 如何生成空间任意圆柱体点云及其轴线 任意直线的生成也就是本文轴线的生成方式 2 环境 o
  • shell 命令 grep -v

    grep v shell命令中 grep命令 是对文本行的搜索命令 grep v就是反向文本行搜索 当控制台输出很多时 有很多是我们不想看到的 就可以用到grep v命令 举个栗子 ls l 结果如下 我们不想看到包含repair的行 执行
  • opencv轻松入门面向python下载_《OpenCV轻松入门:面向Python(博文视点出品)》(李立宗)【摘要 书评 试读】- 京东图书...

    本书采用Python语言 以案例的形式介绍了OpenCV中的常用算法及其使用方法 Python是一种高效的开发语言 使用Python调用OpenCV中的算法 可以快速地实现计算机视觉应用 于仕琪 OpenCV开源库在国内的早期推广者 Ope
  • oracle中 case when,Oracle CASE WHEN的用法

    CASE WHEN的两种表达形式 方式一 CASE WHEN D10 成功签收 THEN 1 WHEN D11 成功签收 THEN 1 ELSE NULL END WHEN 中间是用判断表达式 方式二 CASE D10 WHEN 成功签收
  • OSError: No such file or directory: 'C:\\Users\\2019\\AppData\\Roaming\\nltk_data\\corpora\\stopword

    nltk download
  • 在VS2017中使用Qt的ui界面添加控件后在cpp源文件中无法调用解决方法

    右键项目属性 找到 Qt Project Settings 将Show in Build Log 属性设置为否 点击确定回到cpp就可以使用ui调用部件了
  • python怎么测试uwsgi并发量_uWSGI使用介绍及性能测试结果

    uwsgi介绍 uWSGI是一个Web服务器 它实现了WSGI协议 uwsgi http等协议 Nginx中HttpUwsgiModule的作用是与uWSGI服务器进行交换 要注意 WSGI uwsgi uWSGI 这三个概念的区分 1 W
  • ES集群性能优化及维护

    ES集群性能优化及维护 注 集群 elasticsearch 版本为 v7 2 1 1 ES索引刷新间隔设置 index refresh interval 刷新时间 默认1 PUT index all settings preserve e
  • 基于C++的栈的两种实现(数组和链表)

    栈 概述 基本操作 用数组实现栈 用链表实现栈 测试 概述 栈是一种只能在表的顶端进行插入和删除运算的线性表 其主要特点是后进先出 LIFO 或先进后出 FILO 该数据结构的示意图如下 基本操作 函数名 用途 bool empty 判断栈
  • webpack4-react-babel7-antd框架的babelrc文件配置写法

    babelrc文件配置写法 webpack2 babel6的babelrc文件配置 presets env modules false stage 0 stage 2 react plugins react hot loader babel