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.mzph.cn/news/759817.shtml

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

相关文章

聚类分析 | Matlab实现基于PCA+DBO+K-means的数据聚类可视化

聚类分析 | Matlab实现基于PCADBOK-means的数据聚类可视化 目录 聚类分析 | Matlab实现基于PCADBOK-means的数据聚类可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 PCA(主成分分析)、DBO(蜣螂优化算法)和K-means聚类…

正则表达式具体用法大全

# 正则表达式: ## 单字符匹配: python # 匹配某个字符串: # text "abc" # ret re.match(b,text) # print(ret.group()) # 点(.):匹配任意的字符(除了\n): # text "\nabc&quo…

输入框禁用状态 可清空输入框如何实现?组件写的

输入框禁用 通过 disabled 属性指定是否禁用 input 组件 <el-input placeholder"请输入内容" v-model"input" :disabled"true"> </el-input> <script> export default { data() { return { input: } } } </script> 可…

[套路] 浏览器引入Vue.js场景-WangEditor富文本编辑器的使用 (永久免费)

系列文章目录 [套路] el-table 多选属性实现单选效果[套路] 基于服务内存实现的中文拼音混合查询[套路] Bypass滑块验证码 目录 系列文章目录前言一、实现1.1 场景1.2 Window对象简介1.3 引入WangEditor1.4 页面配置 前言 公司使用freemarker的老旧SpringBootWeb后台项目, 前…

力扣热门算法题 59. 螺旋矩阵 II,60. 排列序列,61. 旋转链表

59. 螺旋矩阵 II&#xff0c;60. 排列序列&#xff0c;61. 旋转链表&#xff0c;每题做详细思路梳理&#xff0c;配套Python&Java双语代码&#xff0c; 2024.03.21 可通过leetcode所有测试用例。 目录 59. 螺旋矩阵 II 解题思路 完整代码 Java Python 60. 排列序列 …

IDEA 2021.3.3最新激活破解教程(可激活至2099年,亲测有效)

下载地址&#xff1a;https://files.cnblogs.com/files/smallfa/ja-netfilter-all.rar?t1684636896&downloadtruehttps://files.cnblogs.com/files/smallfa/ja-netfilter-all.rar?t1684636896&downloadtrue1.Windows 系统下载解压到文件夹内&#xff0c;点击运行 ins…

就业班 2401--3.13 走进网络

走进网络 长风破浪会有时&#xff0c;直挂云帆济沧海。 1.认识计算机 1.计算机网络是由计算机和通讯构成的&#xff0c;网络研究的是“通信”。 ------1946 世界上第一台计算机 2.终端&#xff1a;只有输入和输出功能&#xff0c;没有计算和处理功能。 3.数据&#xff1a;一串…

学点儿Java_Day6_面向对象:类、封装、构造方法

1 类 1.1 定义 类&#xff1a;对现实世界中事物的抽象。Student 对象&#xff1a;现实世界中具体的个体。张三、李四 这些具体的学生 面向对象的特征&#xff1a;抽象、封装、继承、多态 OOP: Object Oriented Programming 类和对象的总结&#xff1a; 1、现实世界都是由很多…

JAVA多线程之JMM

文章目录 1. Java内存模型2. 内存交互3. 三大特性3.1 可见性3.1.1 可见性问题3.1.2 原因3.1.3 解决方法 3.2 原子性3.3 有序性 在继续学习JUC之前&#xff0c;我们现在这里介绍一下Java内存模型&#xff0c;也就是JMM&#xff0c;进而引出关键字volatile的使用条件。 1. Java内…

相机的内外参数标定和畸变矫正原理和代码

相机的成像过程实质上是坐标系转换。首先空间中的点坐标由世界坐标系转换到相机坐标系&#xff0c;然后将其投影到成像平面&#xff08;图像物理坐标系&#xff09;&#xff0c;最后再将成像平面上的数据转换到图像像素坐标系。但是由于透镜制造精度及组装工艺的差别会引入畸变…

【SQL】1251. 平均售价(IFNULL函数)

前述 知识点回顾&#xff1a;MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用 题目描述 leetcode题目&#xff1a;1251. 平均售价 Code select P.product_id,ifnull(round(sum(units * price) / sum(units), 2), 0) as average_price from Prices P left join UnitsS…

无痕消除笔APP好用吗?3款超实用软件分享

无痕消除笔APP好用吗&#xff1f;在日常生活中&#xff0c;无痕消除笔APP的便捷性不言而喻。无论是想要去除照片中的小瑕疵&#xff0c;还是快速修正文案中的错别字&#xff0c;这款工具都能迅速而精准地满足需求。它不仅提升了我们处理图片和文本的效率&#xff0c;还让我们的…

一个Flash编程错误标志的探析

1、问题描述 客户项目中使用的 MCU 型号是 STM32G0B1, 他们反馈在代码中尝试擦除并编程 FLASH时, 发现 FLASH 的状态寄存器显示编程错误(如图 1 所示). 问题是当前代码还没有开始擦除和编程, 怎么就有了编程错误标志了呢 ? 如果不将此错误标志清除, 后续的编程操作无法继续.客…

vue2 table 页面 + 功能 展示

首页代码 <!-- 首页展示页面 弹框展示 --> <template><div style><el-button type"text" size"small" click"dailys()">测试跳转</el-button><!-- <div class"dingwei"><a href"#…

【办公类-16-07-07】“2023下学期 大班户外游戏2(有场地和无场地版,每天不同场地)”(python 排班表系列)

作品展示 背景需求&#xff1a; 2024年2月教务组发放的是“每周五天内容相同&#xff0c;两周10天内容相同”的户外游戏安排 【办公类-16-07-05】合并版“2023下学期 大班户外游戏&#xff08;有场地和无场地版&#xff0c;两周一次&#xff09;”&#xff08;python 排班表系…

css预处理器scss的使用如何全局引入

目录 scss 基本功能 1、嵌套 2、变量 $ 3、mixin 和 include 4、extend 5、import scss 在项目中的使用 1、存放 scss 文件 2、引入 variables 和 mixins 2-1、局部引入 2-2、全局引入 3、入口文件中引入其他文件 项目中使用 css 预处理器&#xff0c;可以提高 cs…

Uibot6.0 (RPA财务机器人师资培训第1天 )RPA+AI、RPA基础语法

训练网站&#xff1a;泓江科技 (lessonplan.cn)https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981(本博客中会有部分课程ppt截屏,如有侵权请及请及时与小北我取得联系~&#xff09; 紧接着小北之前的几篇博客&#xff0c;友友们我们即将开展新课的学习~…

Vulnhub - Raven2

希望和各位大佬一起学习&#xff0c;如果文章内容有错请多多指正&#xff0c;谢谢&#xff01; 个人博客链接&#xff1a;CH4SER的个人BLOG – Welcome To Ch4sers Blog Raven2 靶机下载地址&#xff1a;https://www.vulnhub.com/entry/raven-2,269/ 0x01 信息收集 Nmap扫描…

spring-boot-devtools debug SilentExitException

spring-boot-devtools debug SilentExitException&#xff1a;springboot热部署debug模式进入SilentExitException /** Copyright 2012-2019 the original author or authors.** Licensed under the Apache License, Version 2.0 (the "License");* you may not use …

软考网工学习笔记(6) 广域通信网

公共交换电话网&#xff08;pstn&#xff09; 在pstn是为了语音通信而建立的网络。从20世纪60你年代开始用于数据传输 电话网有三个部分组成&#xff1a; 本地回路 &#xff0c;干线 和 交换机 。 干线 和 交换机 一般采用数字传输和交换技术 &#xff0c;而 本地回路基本采…