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://www.rhkb.cn/news/280773.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于yolov5的单目测距实现与总结+相机模型+标定

写这篇文章的目的是为了总结我之前看的标定,相机模型以及单目测距的内容,如果有错误,还请不吝赐教。 参考链接: 相机模型、相机标定及基于yolov5的单目测距实现 深度学习目标检测目标追踪单目测距 单目测距代码部署(目…

操作系统:malloc与堆区内存管理

malloc是函数而不是系统调用,他的底层是同调调用brk和mmap这两个系统调用实现功能的,具体选择brk还是mmap要看申请的空间大小以及malloc中的阈值(一般是128kb) 注意申请的空间只有使用才会触发缺页中断映射到物理内存 不理解的话先…

流畅的 Python 第二版(GPT 重译)(十二)

第五部分:元编程 第二十二章:动态属性和属性 属性的关键重要性在于,它们的存在使得将公共数据属性作为类的公共接口的一部分完全安全且确实可取。 Martelli、Ravenscroft 和 Holden,“为什么属性很重要” 在 Python 中&#xff0…

鸿蒙开发实战:【Faultloggerd部件】

theme: z-blue 简介 Faultloggerd部件是OpenHarmony中C/C运行时崩溃临时日志的生成及管理模块。面向基于 Rust 开发的部件,Faultloggerd 提供了Rust Panic故障日志生成能力。系统开发者可以在预设的路径下找到故障日志,定位相关问题。 架构 Native In…

成为高效Java工程师的干货笔记

💂 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】🤟 基于Web端打造的:👉轻量化工具创作平台💅 想寻找共同学习交流,摸鱼划水的小伙伴,请点击【全栈技术交流群】 作为一名Java工程师&…

主食冻干有哪些优缺点?十大热门主食冻干排行榜

科学养猫理念的推广,使得主食冻干喂养越来越受到养猫者的欢迎。主食冻干不仅符合猫咪的自然饮食习惯,还能提供丰富的营养,有助于保持猫咪的口腔和消化系统健康。然而,许多猫主人在选择主食冻干产品时感到迷茫。在本文中&#xff0…

HTML5语法总结

文章目录 一.HTML基本框架二.标题标签三.段落标签四.换行与水平线标签五.文本格式化标签(加粗、倾斜、下划线、删除线)六.图像标签扩展:相对路径,绝对路径与在线网址 七.超链接标签八.音频标签九.视频标签十.列表标签十一.表格标签扩展:表格结构标签合并…

28-5 文件上传漏洞 - 图片马

一、文件内容检测 解析漏洞定义 控制文件是否被当做后端脚本处理 二、图片马绕过 图片马;在图片中包含一句话木马。利用解析漏洞如.htaccess 或文件包含漏洞,对图片马进行解析,执行其中的恶意代码。优势在于可以绕过多种防护机制。 三、图片马制作方法: # 一句话马示例…

【LabVIEW FPGA入门】局部变量和全局变量

局部变量 无法访问某前面板对象或需要在程序框图节点之间传递数据时,可创建前面板对象的局部变量。创建局部变量后,局部变量仅仅出现在程序框图上,而不在前面板上。 局部变量可对前面板上的输入控件或显示件进行数据读写。写入局部变量相当于…

【微服务-Nacos】Nacos集群的工作原理及集群间数据同步过程

上篇文章我们介绍了Nacos集群的搭建方法及步骤,下面我们来看一下Nacos集群的工作原理,一共有两部分:Leader节点选举及各节点数据同步。 1、Nacos集群中Leader节点是如何产生的 Nacos集群采用了Raft算法实现。它是一种比较简单的选举算法&am…

leetcode 18.四数之和 java

题目 思路 整体在三数之和的基础上进行修改。(所有需要修改的地方,我在代码里加了//改 的注释) 大的一个思路就是,在三数之和的外面再套一层循环。相当于固定前两个数。然后这道题目标值变成一个参数了,不是三数之和…

uniapp,导航栏(切换项)有多项,溢出采取左滑右滑的形式展示

一、实现效果 当有多项的导航&#xff0c;或者说切换项&#xff0c;超出页面的宽度&#xff0c;我们采取可滑动的方式比较好一些&#xff01;并且在页面右边加个遮罩&#xff0c;模拟最右边有渐变效果&#xff01; 二、实现代码 html代码&#xff1a; <!-- 头部导航栏 --…

[数据集][目标检测]焊接件表面缺陷检测数据集VOC+YOLO格式2292张10类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2292 标注数量(xml文件个数)&#xff1a;2292 标注数量(txt文件个数)&#xff1a;2292 标注…

使用jscpd对比重复代码

背景 检查项目中重复的代码&#xff0c;或者代码片段 jscpd 两个文件对比 Jscpd 是一个用于检测代码复制和粘贴的工具&#xff0c;它可以比较两个文件并报告相似性的百分比。 以下是如何使用 Jscpd 来比较两个文件的示例&#xff1a; 首先&#xff0c;确保你已经安装了 Nod…

OpenCV4.9.0在Android 开发简介

查看&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a;使用 Clojure 进行 OpenCV 开发简介 下一篇&#xff1a;暂无 引言&#xff1a; OpenCV是一个跨平台计算机视觉库&#xff0c;广泛用于图像处理、计算机视觉和机器学习等领域…

雀巢中国劳动力生态系统上线仪式圆满落幕

3月19日&#xff0c;雀巢中国劳动力生态系统上线仪式在雀巢北京总部举办。双方代表对项目进行了回顾&#xff0c;并就2024年的重点任务展开了深入讨论&#xff0c;共同探讨未来合作的方向和策略。 当天下午&#xff0c;劳动力效能典范游学之走进雀巢活动圆满落幕。活动展示了雀…

数字人解决方案— SadTalker语音驱动图像生成视频原理与源码部署

简介 随着数字人物概念的兴起和生成技术的不断发展&#xff0c;将照片中的人物与音频输入进行同步变得越来越容易。然而&#xff0c;目前仍存在一些问题&#xff0c;比如头部运动不自然、面部表情扭曲以及图片和视频中人物面部的差异等。为了解决这些问题&#xff0c;来自西安…

C# winform修改背景图 控件双向绑定 拖拽打开图片

修改背景图 说明 这里我准备基于百度飞桨PaddleSeg项目的人像分割模块做一个人像抠图&#xff0c;这里顺便用上了双向绑定和图片拖拽打开。 下面就是示例&#xff1a; 用颜色替换 用背景图替换 保存成功后的图片 一、使用百度飞桨PaddleSeg //初始化 引擎engine new Padd…

使用ansible批量修改操作系统管理员账号密码

一、ansible server端配置 1、对于Linux主机配置免密登录ssh-copy-id -i ~/.ssh/id_rsa.pub rootremote_ip 2、在/etc/ansible/hosts文件中添加相应主机IP 3、对于Windows主机需要在/etc/ansible/hosts文件中进行以下配置 192.168.83.132 ansible_ssh_useradministrator an…

【AI】Ubuntu系统深度学习框架的神经网络图绘制

一、Graphviz 在Ubuntu上安装Graphviz&#xff0c;可以使用命令行工具apt进行安装。 安装Graphviz的步骤相对简单。打开终端&#xff0c;输入以下命令更新软件包列表&#xff1a;sudo apt update。之后&#xff0c;使用命令sudo apt install graphviz来安装Graphviz软件包。为…