babel 执行原理

Posted on Edited on

Babel 是一个广泛使用的 JavaScript 编译器，主要作用是将现代的 JavaScript 代码（如 ES6+）转换为兼容性更强的旧版本（如 ES5）。其基本工作原理是通过抽象语法树（AST，Abstract Syntax Tree）来进行代码转换，从而实现对语言特性的支持，主要的工作流程如下：

1. 代码解析（Parsing）

Babel 首先会对 ES6+ 代码进行 解析（Parsing），这一步骤会将源代码转换为抽象语法树（AST）。

  • 源代码（Source Code） 是 JavaScript 代码，如：

    1
    2
    3
    4
    const foo = () => {
      let bar = 42
      console.log(bar)
    }

  • 解析过程 会将代码解析成 AST。AST 是一种以树状结构表示代码的方式，每一个节点代表代码中的一个组成部分（如变量、表达式、函数等）。

    例如，上述代码的 AST 可能会长成如下形式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    {
      "type": "Program",
      "body": [
        {
          "type": "VariableDeclaration",
          "declarations": [
            {
              "type": "VariableDeclarator",
              "id": {
                "type": "Identifier",
                "name": "foo"
              },
              "init": {
                "type": "ArrowFunctionExpression",
                "params": [],
                "body": {
                  "type": "BlockStatement",
                  "body": [
                    {
                      "type": "VariableDeclaration",
                      "declarations": [
                        {
                          "type": "VariableDeclarator",
                          "id": {
                            "type": "Identifier",
                            "name": "bar"
                          },
                          "init": {
                            "type": "Literal",
                            "value": 42
                          }
                        }
                      ]
                    },
                    {
                      "type": "ExpressionStatement",
                      "expression": {
                        "type": "CallExpression",
                        "callee": {
                          "type": "MemberExpression",
                          "object": {
                            "type": "Identifier",
                            "name": "console"
                          },
                          "property": {
                            "type": "Identifier",
                            "name": "log"
                          }
                        },
                        "arguments": [
                          {
                            "type": "Identifier",
                            "name": "bar"
                          }
                        ]
                      }
                    }
                  ]
                }
              }
            }
          ],
          "kind": "const"
        }
      ]
    }

2. 转换（Transformation）

Babel 会遍历 AST，并根据配置文件中指定的转换规则（如将箭头函数转换为普通函数、let 转换为 var 等），进行 转换（Transformation）。

  • 转换规则：

    • 箭头函数转换为普通函数：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      // ES6+
      const foo = () => {
        console.log("Hello")
      }

      // ES5
      var foo = function () {
        console.log("Hello")
      }

    • **let 转换为 var**：

      1
      2
      3
      4
      5
      // ES6+
      let x = 10

      // ES5
      var x = 10

    • 类（Class）转换为构造函数：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      // ES6+
      class Person {
        constructor(name) {
          this.name = name
        }
      }

      // ES5
      function Person(name) {
        this.name = name
      }

    • 模块（Modules）转换为 CommonJS（或其他规范）：

      1
      2
      3
      4
      5
      // ES6+
      import { foo } from "./foo"

      // ES5
      var foo = require("./foo").foo

    这个过程中，Babel 会对每个 AST 节点进行处理，并根据转换规则生成新的 AST。

3. 代码生成（Code Generation）

转换后的 AST 会被传递到 代码生成（Code Generation） 阶段。此时，Babel 会将 AST 转换回对应的 JavaScript 代码。

  • 生成过程：Babel 会根据 AST 树的结构重新生成对应的 JavaScript 代码。

例如，如果我们有如下的 AST 树，经过转换后可以生成对应的 ES5 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": { "name": "foo" },
          "init": {
            "type": "FunctionExpression",
            "params": [],
            "body": {
              "type": "BlockStatement",
              "body": [
                {
                  "type": "ExpressionStatement",
                  "expression": {
                    "type": "CallExpression",
                    "callee": {
                      "type": "MemberExpression",
                      "object": { "name": "console" },
                      "property": { "name": "log" }
                    },
                    "arguments": [{ "name": "bar" }]
                  }
                }
              ]
            }
          }
        }
      ]
    }
  ]
}

生成的 ES5 代码可能如下所示：

1
2
3
4
var foo = function () {
  var bar = 42
  console.log(bar)
}

4. 插件和预设（Presets & Plugins）

Babel 的强大之处还在于其 插件化 设计。通过插件和预设，Babel 可以灵活地支持不同版本的 JavaScript 转换规则。

  • 预设（Presets） 是一组插件的集合，通常用于根据某些特性（如 ES2015、React、TypeScript）对代码进行转换。例如，@babel/preset-env 可以将现代 JavaScript（ES6+）转换为符合特定浏览器兼容性的代码。

  • 插件（Plugins） 是可以根据开发者需求定制的单一转换规则。例如，@babel/plugin-transform-arrow-functions 插件专门将箭头函数转换为普通函数。

总结：Babel 的工作原理

Babel 将 ES6+ 的 JavaScript 代码转为 ES5 的代码，通常经历以下步骤：

  1. 解析（Parsing）：将源代码转换为 AST。
  2. 转换（Transformation）：根据预设和插件规则转换 AST，修改语法和结构。
  3. 代码生成（Code Generation）：将转换后的 AST 生成 ES5 代码。

通过这些步骤，Babel 能够让开发者使用最新的 JavaScript 特性，而不会受到浏览器兼容性的限制。这是现代前端开发中实现跨浏览器支持的重要工具。