webpack5零基础入门-10babel的使用

Babel

JavaScript 编译器。

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中

1.安装相关包

npm install -D babel-loader @babel/core @babel/preset-env 

 

2.进行相关配置

2.1第一种写法是在webpack的module中新增rule并配置options,这种写法比较简单

{test: /\.js$/,/**排除哪些文件 */exclude: /(node_modules)/,loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},},

因为只需要用到babel-loader我们不需要使用use直接用loader即可 

2.1第一种写法是在webpack的module中新增rule并配置options,这种写法比较简单

{test: /\.js$/,/**排除哪些文件 */exclude: /(node_modules)/,loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},},

因为只需要用到babel-loader我们不需要使用use直接用loader即可

2.2第二种写法是通过babel.config.js进行options的配置

查看未配置babel前打包生成的dist.js可以发现箭头函数和...符号未被编译,还是es6的语法

 

 配置后重新打包发现编译成es5的语法了

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2871476.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Day67:WEB攻防-Java安全JNDIRMILDAP五大不安全组件RCE执行不出网

知识点: 1、Java安全-RCE执行-5大类函数调用 2、Java安全-JNDI注入-RMI&LDAP&高版本 3、Java安全-不安全组件-Shiro&FastJson&JackJson&XStream&Log4j Java安全-RCE执行-5大类函数调用 Java中代码执行的类: GroovyRuntimeExecPr…

git如何回退版本reset和revert命令的区别

文章目录 git回退版本的方法使用reset回退使用revert回退 总结 git回退版本的方法 Git回退到某个版本有两种方法&#xff1a;reset和revert。 使用reset回退 git reset --hard <版本号>该命令将HEAD指针移动到指定的版本&#xff0c;并重置工作目录和暂存区的内容。这…

微信小程序Skyline模式自定义tab组件胶囊与原生胶囊平齐,安卓和ios均自适应

进入下面小程序可以体验效果&#xff1a; 至于原理的话&#xff0c;解释起来毕竟麻烦&#xff0c;各位可以看源码自己分析。其实很简单&#xff0c;就算计算布局。很多网上公布的布局&#xff0c;都不能正常自适应。在下这个是完美可以的 1、WXML <view class"weui…

【遍历方法】浅析Java中字符串、数组、集合的遍历

目录 前言 字符串篇 1.1 使用 for 循环和 charAt 方法 1.2 使用增强 for 循环&#xff08;forEach 循环&#xff09; 1.3 使用 Java 8 的 Stream API 最终效果 数组篇 2.1 使用普通 for 循环 2.2 使用增强型 for 循环( forEach 循环) 2.3 使用 Arrays.asList 和 forE…

Python之Web开发中级教程----配置数据库

Python之Web开发中级教程----配置数据库 在settings.py中保存了数据库的连接配置信息&#xff0c;Django默认初始配置使用sqlite数据库。 DATABASES { default: { ENGINE: django.db.backends.sqlite3, NAME: os.path.join(BASE_DIR, db.sqlite3), } } 如果需要用MySQL数据…

LeetCode 0310.最小高度树:拓扑排序秒了

【LetMeFly】310.最小高度树&#xff1a;拓扑排序秒了 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-height-trees/ 树是一个无向图&#xff0c;其中任何两个顶点只通过一条路径连接。 换句话说&#xff0c;一个任何没有简单环路的连通图都是一棵树。 给你…

nginx做静态代理方式

改配置文件 server {listen 8899;server_name localhost;location / {root html;index index.html index.htm;} } 生成页面代码 例子 GetMapping("createIndex")public Result createIndex() {//获取后台存储数据Result result productFeignClient.getB…

python之万花尺

1、使用模块 import sys, random, argparse import numpy as np import math import turtle import random from PIL import Image from datetime import datetime from math import gcd 依次使用pip下载即可 2、代码 import sys, random, argparse import numpy as np imp…

Linux环境开发工具之yum

前言 前面我们已经对基本的指令和权限进行了介绍&#xff0c;本期开始我们将介绍常用的开发工具。例如&#xff1a;软件包管理器yum。 本期内容介绍 Linux上安装软件的方式 什么是yum yum的相关操作 yum的本地配置和yum源 一、Linux上安装软件的方式 在介绍Linux上如何安装一…

Docker 安装 Skywalking以及UI界面

关于Skywalking 在现代分布式系统架构中&#xff0c;应用性能监控&#xff08;Application Performance Monitoring, APM&#xff09;扮演着至关重要的角色。本文将聚焦于一款备受瞩目的开源APM工具——Apache Skywalking&#xff0c;通过对其功能特性和工作原理的详细介绍&am…

打破数据孤岛,TDengine 与 Tapdata 实现兼容性互认证

当前&#xff0c;传统行业正面临着数字化升级的紧迫需求&#xff0c;但海量时序数据的处理以及数据孤岛问题却日益突出。越来越多的传统企业选择引入时序数据库&#xff08;Time Series Database&#xff0c;TSDB&#xff09;升级数据架构&#xff0c;同时&#xff0c;为了克服…

C++ 笛卡尔树

目录 一、性质二、构建笛卡尔树三、应用四、源码 一、性质 堆性质&#xff1a; 笛卡尔树是一种满足堆性质的树。每个节点包含两个值&#xff1a;键值&#xff08;key&#xff09;和优先级值&#xff08;priority&#xff09;。在笛卡尔树中&#xff0c;根节点的优先级值最大&am…

C++ 特殊类及单例模式

文章目录 1. 前言2. 不能被拷贝的类3. 不能被继承的类4. 只能在堆上创建对象的类5. 只能在栈上创建对象的类6. 只能创建一个对象的类&#xff08;单例模式&#xff09; 1. 前言 在实际场景中&#xff0c;我们在编写类的过程中总会遇到一些特殊情况&#xff0c;比如设计一个类不…

[AutoSar]BSW_Com015 PDUR 模块配置

目录 关键词平台说明一、Abbreviations二、PduRBswModules三、PduRGeneration四、PduRDestPdus4.1 全局PDU ID和本地PDU ID 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector &#xff0c; EB芯片厂商TI 英飞凌编程语言C&#xff0…

[ThinkPHP]Arr返回1

$detailId (int)Arr::get($detail, null); var_dump($detailId); 打印结果&#xff1a;int(1) 原因&#xff1a; vendor/topthink/think-helper/src/helper/Arr.php

水泵房远程监控物联网系统

随着物联网技术的快速发展&#xff0c;越来越多的行业开始利用物联网技术实现设备的远程监控与管理。水泵房作为城市供水系统的重要组成部分&#xff0c;其运行状态的监控与管理至关重要。HiWoo Cloud作为专业的物联网云服务平台&#xff0c;为水泵房远程监控提供了高效、稳定、…

API--10-1--StringJoiner工具类

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 StringJoiner构造函数成员变量公开方法1.构造函数2. add() 添加字符串3. setEmptyValue 输出指定字符串 StringJoiner案例案例1案例2 StringJoiner StringJoiner是…

5 张图带你了解分布式事务 Saga 模式中的状态机

大家好&#xff0c;我是君哥。 状态机在我们的工作中应用非常广泛&#xff0c;今天聊一聊分布式事务中间件 Seata 中 Saga 模式的状态机。 1 状态机简介 状态机是一个数学模型&#xff0c;它将工作中的运行状态和流转规则抽象出来&#xff0c;可以协调相关信号来完成预先设定…

30.HarmonyOS App(JAVA)鸿蒙系统app多线程任务分发器

HarmonyOS App(JAVA)多线程任务分发器 打印时间&#xff0c;记录到编辑框textfield信息显示 同步分发&#xff0c;异步分发&#xff0c;异步延迟分发&#xff0c;分组任务分发&#xff0c;屏蔽任务分发&#xff0c;多次任务分发 参考代码注释 场景介绍 如果应用的业务逻辑比…

Docker进阶教程 - 1 Dockerfile

更好的阅读体验&#xff1a;点这里 &#xff08; www.doubibiji.com &#xff09; 1 Dockerfile Dockerfile 是做什么的&#xff1f; 我们前面说到&#xff0c;制作镜像的方法主要有两种方式&#xff1a; 使用 docker commit 命令&#xff1b;使用 Dockerfile 文件。 但是…