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聚类…

js手写快速排序

思路 找到一个基准元素,一般取第一个元素为基准元素然后从第二个开始比较,比基准元素大的放在基准元素在右边,比基准元素小的放在基准元素在左边然后对左右数组进行递归 快速排序 写法1 单独开辟两个存储空间left和right来存储每次递归比target小和大的…

正则表达式具体用法大全

# 正则表达式: ## 单字符匹配: 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. 排列序列 …

adb logcat 命令使用

adb logcat 命令-CSDN博客 c fork, execl 参数 logcat | grep-CSDN博客 一.命令格式 adb logcat [选项] [过滤项], 其中 选项 和 过滤项 在 中括号 [] 中, 说明这是可选的; 选项解析: 1."-s"选项 : 只显示指定标签的日志; ------>adb logcat -s SWVDEC 显示SWVDE…

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;一串…

js截取网址参数值方法

一般分为两种网址截取方法&#xff1a; 第一种&#xff0c;例如链接&#xff1a;http://192.168.32.135:9020/#/authentication/Login?toeknceshi token 值出现在 URL 的 hash 部分,所以你需要使用 window.location.hash 来获取 hash 部分&#xff0c;然后使用 URLSearchPara…

学点儿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内…

vue中动态显示时间

我也是参考别人的。 代码如下 export default {name: Preview,data() {return {timer: undefined,nowTime: new Date(),};},created() {// 要显示时间&#xff0c;在渲染页面之前一直调用该函数&#xff0c;对this.time进行赋值开启定时this.timer setInterval(() > {//时…

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

相机的成像过程实质上是坐标系转换。首先空间中的点坐标由世界坐标系转换到相机坐标系&#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"#…

LeetCode 面试经典150题 134.加油站

题目&#xff1a; 在一条环路上有 n 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油箱为空。 给定两个整数…

How to install mongodb on redhat 7.7

下载rpm: mongodb-enterprise-server-6.0.3-1.el7.x86_64.rpmmongodb-org-server-6.0.4-1.el7.x86_64.rpmmongodb-mms-6.0.9.100.20230201T2148Z.x86_64.rpm rpm -ivh mongodb-org-server-6.0.4-1.el7.x86_64.rpm rpm -ivh mongodb-mms-6.0.9.100.20230201T2148Z.x86_64.rpm …