了解 Babel 的底层原理

1. 了解Babel的基本概念和作用

  • Babel 是一个 JavaScript 编译器,也是一个工具链,主要用于将 ECMAScript 2015+(即ES6+)代码转换为当前和旧版浏览器或环境中向后兼容的 JavaScript 版本(如ES5)。
  • Babel 的主要作用包括转换语法、为目标环境中缺少的 Polyfill 功能提供支持(通过第三方 polyfill,例如 core-js),以及进行源代码转换(codemods)。

2. 理解Babel的执行过程原理

Babel 的执行过程主要包括以下三个步骤:

  1. 解析阶段(Parsing)

    • Babel首先使用解析器(如 Babylon 或 @babel/parser)将输入的 JavaScript 代码解析成抽象语法树(AST)。AST 是一种将源代码表示为树状结构的数据结构,它能够将代码的结构和含义进行抽象并以对象的形式表示出来。
    • 解析过程可以分为词法分析和语法分析两个步骤。词法分析是将源代码分割成一个个的词法单元(Token),而语法分析则是将 Token 流转换成 AST。
  2. 转换阶段(Transformation)

    • 在得到 AST 之后,Babel会遍历这个 AST,并根据配置文件(如 .babelrc 文件)中的规则或插件来进行代码转换。
    • Babel常常使用插件来实现转换操作。插件通过操作 AST 节点来实现代码转换。例如,@babel/plugin-transform-arrow-functions 插件可以将箭头函数转换为函数表达式以实现向后兼容性。
  3. 输出阶段(Generation)

    • 经过转换后的 AST 会被重新生成为 JavaScript 代码,并作为 Babel 的输出。

babel 解混淆文章:JS逆向之AST解混淆----元宇宙-CSDN博客

3. Babel 预设和插件

3.1. Babel Presets

Presets 是一组插件的集合,通常用于支持特定的 JavaScript 特性或版本。例如,@babel/preset-env 是一个流行的 preset,它允许你指定你想要支持的 JavaScript 环境(如 ES2015、ES2016 等),然后 Babel 会自动包含必要的插件来转换这些特性。

使用 presets 的好处是,你不需要手动添加和配置大量的插件。只需指定一个 preset,Babel 就会为你处理一切。

例如,要在 Babel 配置中使用 @babel/preset-env,你可以这样做:

{  "presets": ["@babel/preset-env"]  
}

3.2. Babel Plugins

Plugins 是 Babel 的基本单元,用于实现具体的代码转换或添加特定的功能。插件可以是官方的、第三方的,甚至是你自己编写的。

每个插件都定义了一个或多个访问者(visitor),这些访问者会在 Babel 的解析过程中被调用,用于处理特定的语法结构或模式。

例如,@babel/plugin-transform-runtime 是一个流行的插件,它允许你使用 Babel 的辅助函数(helpers)而不是内联它们。这有助于减少生成的代码的大小,并避免在多个模块中重复相同的辅助函数。

要在 Babel 配置中使用插件,你可以这样做:

{  "plugins": ["@babel/plugin-transform-runtime"]  
}

3.3. Presets 和 Plugins 的关系

插件的排列顺序很重要。

这意味着如果两个转换插件都将处理“程序(Program)”的某个代码片段,则将根据转换插件或 preset 的排列顺序依次执行。

  • 插件在 Presets 前运行。
  • 插件顺序从前往后排列。
  • Preset 顺序是颠倒的(从后往前)。

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

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

相关文章

【环境搭建】1.阿里云ECS服务器 安装jdk8

在阿里云服务器上安装 JDK 8 可以通过以下步骤完成。假设你使用的是 CentOS 或者其他基于 Red Hat 的发行版或Alibaba Cloud Linux 3.2104 LTS 64位。 1.更新系统软件包 sudo yum update -y2.安装 OpenJDK 8 使用 yum 包管理器安装 OpenJDK 8 sudo yum install -y java-1.8…

Linux编译器-gcc或g++的使用

一.安装gcc/g 在linux中是不会自带gcc/g的,我们需要编译程序就自己需要安装gcc/g。 很简单我们使用简单的命令安装gcc:sudo yum install -y gcc。 g安装:sudo yum install -y gcc-c。 我们知道Windows上区分文件,都是使用文件…

如何使用Python的Turtle模块绘制小猪

一、前置条件 在开始学习如何使用Python的Turtle模块进行绘画之前,请确保你的电脑已安装Python环境。如果尚未安装Python,你可以从Python官网下载并安装最新版本。 Turtle模块是Python内置的一个用于绘图的库,通常不需要额外安装。如果你发…

反转链表 (oj题)

一、题目链接 https://leetcode.cn/problems/reverse-linked-list/submissions/538124207 二、题目思路 1.定义三个指针,p1先指向NULL p2指向头结点 p3指向第二个结点 2.p2的next指向p1。然后移动指针,p1来到p2的位置,p2来到p3的位置&…

中缀表达式和前缀后缀

在中缀表达式中,操作数可能与两个操作符相结合 但是,想要不带括号无歧义,且不需要考虑运算符优先级和结合性 所以考虑 前缀表达式,波兰表达式 后缀表达式 逆波兰表达式 对于人来说,中缀表达式是最容易读懂的。但是对于…

基于JSP技术的网络视频播放器

你好呀,我是计算机学长猫哥!如果有相关需求,文末可以找到我的联系方式。 开发语言:Java 数据库:MySQL 技术:JSP技术 工具:IDEA/Eclipse、Navicat、Maven 系统展示 首页 管理员界面 用户界…

flutter json转map转bean互转

1. ///由 JsonSerializable() 自动生成&#xff0c;由 map 转为实体类factory UserBean.fromJson(Map<String, dynamic> json) >_$UserBeanFromJson(json);///由 JsonSerializable() 自动生成&#xff0c;实体类转为 mapMap<String, dynamic> toJson() > _$U…

5-Maven-setttings和pom.xml常用配置一览

5-Maven-setttings和pom.xml常用配置一览 setttings.xml配置 <?xml version"1.0" encoding"UTF-8"?> <settings xmlns"http://maven.apache.org/SETTINGS/1.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xs…

Live800:客户服务团队的力量,塑造企业的服务之魂

在数字化时代&#xff0c;企业的竞争已经不仅仅是产品和价格的竞争&#xff0c;更是服务质量的竞争。这里将探讨客户服务团队的力量如何塑造企业的服务之魂&#xff0c;以及这一团队如何成为企业不可或缺的一部分。 一、客户服务团队的重要性 客户服务团队是企业与客户之间的重…

毫米波SDK使用2

5.5 毫米波SDK-TI组件 毫米波SDK功能分解成组件将在接下来的几小节中解释。有关这些模块的详细文档&#xff0c;请参阅位于mmwave_mcuplus_sdk_<ver>/docs/mmwave_sdk_module_document .html的顶层文档。 5.5.1 演示 5.5.1.1 毫米波演示 这个演示位于mmwave_mcuplus_sd…

简单了解java中的泛型

泛型 1、泛型含义 泛型是一种类型参数&#xff0c;专门用来保存类型用的。 例如ArrayList&#xff0c;这个E就是所谓的泛型了。使用ArrayList时&#xff0c;只要给E指定某一个类型&#xff0c;里面所有用到泛型的地方都会被指定对应的类型。 2、使用泛型的好处 不用泛型带…

基于协同过滤推荐的在线课程选修系统

基于协同过滤推荐的在线课程选修系统 demo 网站查看 http://course.qsxbc.com/all_course/ 点我查看 效果 功能 登录注册、点赞收藏、评分评论&#xff0c;课程推荐&#xff0c;热门课程&#xff0c;个人中心&#xff0c;可视化&#xff0c;后台管理&#xff0c;课程选修 …

python文件:py,ipynb, pyi, pyc, pyd, pyo都是什么文件?

1、Python文件类型介绍 &#x1f4c1; 1.1 .py 文件&#xff1a;源代码基础 .py 文件是 Python 最基本的源代码文件格式&#xff0c;用于存储纯文本形式的 Python 代码。它是开发者编写程序的主要场所&#xff0c;包含函数、类、变量定义以及执行逻辑。Python 解释器直接读取…

Linux 命令 `db_hotbackup` 详解

Linux 命令 db_hotbackup 详解 在数据库管理领域&#xff0c;特别是在处理像Berkeley DB这样的数据库时&#xff0c;数据的备份和恢复是至关重要的一环。db_hotbackup 是Berkeley DB提供的一个实用工具&#xff0c;用于在数据库运行时进行热备份&#xff08;hot backup&#x…

高考后的职业规划:学习LabVIEW开发前景广阔

在今天的高考后&#xff0c;选择学习LabVIEW开发为未来职业规划将大有可为。LabVIEW以其图形化编程、强大的数据处理和硬件集成功能&#xff0c;广泛应用于工程、科研、自动化测试等领域。掌握LabVIEW开发技能&#xff0c;不仅就业前景广阔&#xff0c;还能参与前沿技术应用&am…

SQL进阶day10————多表查询

目录 1嵌套子查询 1.1月均完成试卷数不小于3的用户爱作答的类别 1.2月均完成试卷数不小于3的用户爱作答的类别 ​编辑1.3 作答试卷得分大于过80的人的用户等级分布 2合并查询 2.1每个题目和每份试卷被作答的人数和次数 2.2分别满足两个活动的人 3连接查询 3.1满足条件…

Linux 35.5 + JetPack v5.1.3@FC-Planner编译安装

Linux 35.5 JetPack v5.1.3FC-Planner编译安装 1. 源由2. 编译&安装Step 1&#xff1a;依赖库安装Step 2&#xff1a;克隆工程Step 3&#xff1a;编译工程Step 4&#xff1a;LKH编译Step 5&#xff1a;安装工程 3. 问题汇总3.1 Killed signal terminated program cc1plus3…

【Unity】 HTFramework框架(五十一)代码片段执行器

更新日期&#xff1a;2024年6月8日。 Github源码&#xff1a;[点我获取源码] Gitee源码&#xff1a;[点我获取源码] 索引 Code Snippet Executer 代码片段执行器使用 Code Snippet Executer打开 Code Snippet Executer动态执行&#xff08;代码片段&#xff09;静态执行&#x…

MySQL——C语言连接数据库

MySQL Connection ​ 连接数据库的客户端除了命令行式的还有图形化界面版本&#xff0c;网页版本&#xff0c;当然也包括语言级别的库或者是包&#xff0c;能够帮助我们直接连接数据库&#xff1b; 一、语言连接库下载 方式一&#xff1a;不建议使用&#xff0c;需要自己配置…

记录项目使用ts时引入js文件后导致项目运行空白问题

主要原因&#xff1a; 使用ts后开启了eslint检测&#xff0c;而js压缩文件引入的位置在eslint检测的文件内。导致eslint检测认为该文件为很大的文件&#xff0c;或eslint认为此文件内存在无法处理的语法结构等问题。 解决方法&#xff1a; 1、把文件移到eslint检测外的文件引入…