js的 Babel原理

news2024/10/6 12:28:14

简介

babel是一个JavaScript编译器,可以将ES2015+ 转换为向后兼容的JavaScript代码,

Babel的原理是将JavaScript代码分为三个阶段: 解析, 转换和输出

1. 解析阶段

Babel首先会使用 Babylon 解析器将输出的 ES2015+diamagnetic解析成抽象语法树(AST), 抽象语法树是
一种JSON形式表示的代码结构的数据结构,他将代码分解成语法单元,并按照层次结构组织起来,
抽象语法树包含了代码的所有信息,包括变量,函数语句等

传送门

例如:

let a = 12

语法树:
在这里插入图片描述

2. 转换阶段

Babel的转换阶段会遍历抽象语法树, 并根据预设的转换规则,对代码进行转换; 转换规则是一组插件,
每个插件都可以针对不同的代码结构进行转换;

例如ES6的箭头函数在ES5中没有对应的语法, Babel的箭头函数插件会将箭头函数 转换为普通函数,Babel还支持自定义插件, 开发者可以根据自己的需求的需求写插件

3. 输出阶段

Babel的输出阶段会将转换后的抽象语法树转换为JavaScript代码, 输出格式可以是浏览器 或者 nodeJs可以执行的代码,也可以是其他JavaScript的的转换工具可以处理代码格式, Babel也支持输出抽象语法树,方柏霓开发者进行后续处理

总之Babel可以通过解析,转换,和输出三个阶段, 将ES2015+ 代码转换为向后兼容的JavaScript代码,
Babel的插件机制使得他可以支持新的JavaScript特性,并使得开发可以根据自己的需求自定义转换规则

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

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

相关文章

端午节,不能只知道吃吃吃.....玩玩玩......

系列文章目录 作者:i阿极 作者简介:数据分析领域优质创作者、多项比赛获奖者:博主个人首页 😊😊😊如果觉得文章不错或能帮助到你学习,可以点赞👍收藏📁评论📒…

FWI 地震数据的认识

目录 1、数据来源。 1)SEG 系列。 2)OpenFWI 系列。 2、数据量,尺寸。 1) SEG 包含两个数据集:SEGSaltData 和 SimulateData。 2)OpenFWI 包含12个数据集: 3、地震数据对应的观测系统。…

Redis原理 - IO详解

原文首更地址,阅读效果更佳! Redis原理 - IO详解 | CoderMast编程桅杆https://www.codermast.com/database/redis/redis-IO.html 用户空间与内核空间 任何Linux 系统的发行版,其系统内核都是 Linux 。我们的应用都需要通过 Linux 内核与硬…

02py游戏开发基础

版本 pygame 2.4.0 (SDL 2.26.4, Python 3.8.2) Hello from the pygame community. https://www.pygame.org/contribute.html Python开发基础 Pygame常用模块 background_image_filename "bg.jpg"#设置图像文件名称 mouse_image_filename "ship.bmp"# 将…

JVM优化00

JVM优化 0.目标 了解下我们为什么要学习JVM优化掌握jvm的运行参数以及参数的设置掌握jvm的内存模型(堆内存)掌握jmap命令的使用以及通过MAT工具进行分析掌握定位分析内存溢出的方法掌握jstack命令的使用掌握VisualJVM工具的使用 1.为什么学习JVM优化 …

LeetCode - #82 删除排序链表中的重复元素 II

文章目录 前言1. 描述2. 示例3. 答案关于我们 前言 我们社区陆续会将顾毅(Netflix 增长黑客,《iOS 面试之道》作者,ACE 职业健身教练。)的 Swift 算法题题解整理为文字版以方便大家学习与阅读。 LeetCode 算法到目前我们已经更新…

异常的介绍与处理

目录 第七章 异常 1.异常 2.处理方法 2.1.try-catch 2.2.多重catch块 2.3.finally 2.4.throw 与 throws 2.5.程序分析 3.自定义异常 内容仅供学习交流,如有问题请留言或私信!!!!! 有空您就点点赞…

【计算机视觉】计算机视觉的简单入门代码介绍(含源代码)

文章目录 一、介绍二、项目代码2.1 导入三方包2.2 读取和展示图片2.3 在图像上绘画2.4 混合图像2.5 图像变换2.6 图像处理2.7 特征检测 一、介绍 计算机视觉是一门研究计算机如何理解和解释图像和视频的学科。 它的目标是让计算机能够模拟人类视觉系统,让它们能够识…

Vivado 下 LED 灯闪烁实验

目录 Vivado 下 LED 灯闪烁实验 1、简介 2、实验环境 3、实验任务 4、硬件设计 5、程序设计 5.1、LED 闪烁模块代码 5.2、Vivado 仿真验证 5.2.1、编写 TB 仿真代码 6、下载验证 6.1、添加约束文件 .xdc 6.2、下载验证 注意:一定要先把下载器的一端连接…

FDM3D打印系列——2、一些基础概念

大家好,我是阿赵。 在买3D打印机之前,一般都会很迷茫,不知道3D打印机是怎样工作的,也不知道有哪些地方需要注意。上一篇文章通过打印一个模型,完整的体验了一次FDM打印3D模型的过程。这里解释一些在3D打印里面的比较基…

PMP考试自学可以吗?

PMP考试不建议自学,听劝,不该省的别省。 PMP现在没有自学了,今年3月的考试报了培训班的同学都说难,培训班的资源老师的专业,怎么也比自己单打独斗强吧,真的报培训班省事很多。 PS:网上说包过的…

X86架构与Arm架构区别

X86架构和ARM架构是主流的两种CPU架构,X86架构的CPU是PC服务器行业的老大,ARM架构的CPU则是移动端的老大。X86架构和arm架构实际上就是CISC与RISC之间的区别,很多用户不理解它们两个之间到底有哪些区别,实际就是它们的领域不太相同…

Liunx安装window中文字体解决中文变方框问题

问题现象描述 没安装中文字体,有可能导致你的程序在windows上运行的好好的,部署到linux上运行就可能出现汉字变成小方块的问题,场景举例:svg文件转png图片,原svg中的中文会变成方框 按如下方法安装中文字体后&#xf…

南卡OE骨传导开放式蓝牙耳机评测!舒适与音质并存!

平时买耳机的时候,你最先会关注什么方向呢?是舒适、美观,还是音质、防水? 对于我来说,首先是功能。作为一个经常健身、跑步的人,最讨厌的就是平时运动流汗进入耳朵之后那种粘腻感觉。时间长了还容易让耳道…

凹下去的白色按钮

先看效果&#xff1a; 再看代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>凹下去的按钮</title><style>import url("https://fonts.googleapis.com/css2?famil…

【SIGMOD 2023】深度学习弹性数据流水线系统GoldMiner,大幅提升任务和集群效率

第一板块&#xff1a;开篇 近日&#xff0c;阿里云机器学习平台PAI和北京大学杨智老师团队合作的论文《GoldMiner: Elastic Scaling of Training Data Pre-Processing Pipelines for Deep Learning》被数据库领域顶会SIGMOD 2023接收。 GoldMiner观察到深度学习任务中的数据预…

redis登录常见报错

第一次接触redis登录的时候遇见几个报错 一、使用以下两个命令报错&#xff1a; ./redis-cli -h 127.0.0.1 -p 6380 ./redis-cli -p 6380 报错&#xff1a;Could not connect to Redis at 127.0.0.1:6380: Connection refused 应该和redis.conf中配置的bind字段的IP有关…

一文全揽C/C++中所有指针相关知识点(从原理到示例,学不完根本学不完!!!!)

本篇会对C/C中【常见指针相关知识】一直进行总结迭代&#xff0c;记得收藏吃灰不迷路&#xff0c;一起学习分享喔 请大家批评指正&#xff0c;一起学习呀~ 一、指针基本知识1.1 指针的定义1.2 &#xff08;*&#xff09; 和&#xff08; &&#xff09; 运算符1.3 如何声明…

SM国密算法(四) -- SM3算法

一、简介 SM3密码杂凑算法是中国国家密码管理局2010年公布的中国商用密码杂凑算法标准。适用于商用密码应用中的数字签名和验证。 SM3是在[SHA-256]基础上改进实现的一种算法&#xff0c;其安全性和SHA-256相当。SM3和MD5的迭代过程类似&#xff0c;也采用Merkle-Damgard结构。…

OpenCV(图像处理)-基于python-滤波器(低通、高通滤波器的使用方法)

1.概念介绍2. 图像卷积filter2D() 3. 低通滤波器3.1 方盒滤波和均值滤波boxFilter()blur() 3.2 高斯滤波&#xff08;高斯噪音&#xff09;3.3 中值滤波&#xff08;胡椒噪音&#xff09;3.4 双边滤波 4. 高通滤波器4.1Sobel&#xff08;索贝尔&#xff09;&#xff08;高斯&am…