了解 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 顺序是颠倒的（从后往前）。