什么是Babel ？

Babel 是一个广泛使用的 JavaScript 编译器，它允许开发者编写下一代 JavaScript 代码（如 ES6/ES2015 及更高版本），并将其转换为向后兼容的 JavaScript 代码，以便在各种环境中运行，包括旧版浏览器。

// es2015 的 const 和 arrow function
const add = (a, b) => a + b;
// Babel 转译后
var add = function add(a, b) {
  return a + b;
};

Babel 提供了插件系统，任何人都可以基于 Babel 编写插件来实现自定义语法转换，这对于开发者来说是个福音。

而这一切的基础需要了解的一个概念：语法树 (Abstract Syntax Tree)，简称：AST。AST 是一种树状结构，其中每个节点代表代码中的一个元素（如变量声明、函数调用等）。

Babel 是如何工作的 ？

工作原理1. 解析 (Parsing)2.转换 (Transformation)3.生成 (Generation)具体步骤

输入代码：

const add = (a, b) => a + b;
console.log(add(2, 3));

解析成 AST：

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "add"
          },
          "init": {
            "type": "ArrowFunctionExpression",
            "params": [
              {
                "type": "Identifier",
                "name": "a"
              },
              {
                "type": "Identifier",
                "name": "b"
              }
            ],
            "body": {
              "type": "BinaryExpression",
              "operator": "+",
              "left": {
                "type": "Identifier",
                "name": "a"
              },
              "right": {
                "type": "Identifier",
                "name": "b"
              }
            }
          }
        }
      ],
      "kind": "const"
    },
    {
      "type": "ExpressionStatement",
      "expression": {
        "type": "CallExpression",
        "callee": {
          "type": "Identifier",
          "name": "console.log"
        },
        "arguments": [
          {
            "type": "CallExpression",
            "callee": {
              "type": "Identifier",
              "name": "add"
            },
            "arguments": [
              {
                "type": "Literal",
                "value": 2,
                "raw": "2"
              },
              {
                "type": "Literal",
                "value": 3,
                "raw": "3"
              }
            ]
          }
        ]
      }
    }
  ]
}

应用插件进行转换：

生成新的 AST：

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "add"
          },
          "init": {
            "type": "FunctionExpression",
            "id": null,
            "params": [
              {
                "type": "Identifier",
                "name": "a"
              },
              {
                "type": "Identifier",
                "name": "b"
              }
            ],
            "body": {
              "type": "BlockStatement",
              "body": [
                {
                  "type": "ReturnStatement",
                  "argument": {
                    "type": "BinaryExpression",
                    "operator": "+",
                    "left": {
                      "type": "Identifier",
                      "name": "a"
                    },
                    "right": {
                      "type": "Identifier",
                      "name": "b"
                    }
                  }
                }
              ]
            }
          }
        }
      ],
      "kind": "const"
    },
    {
      "type": "ExpressionStatement",
      "expression": {
        "type": "CallExpression",
        "callee": {
          "type": "Identifier",
          "name": "console.log"
        },
        "arguments": [
          {
            "type": "CallExpression",
            "callee": {
              "type": "Identifier",
              "name": "add"
            },
            "arguments": [
              {
                "type": "Literal",
                "value": 2,
                "raw": "2"
              },
              {
                "type": "Literal",
                "value": 3,
                "raw": "3"
              }
            ]
          }
        ]
      }
    }
  ]
}

生成最终代码：

const add = function (a, b) {
  return a + b;
};
console.log(add(2, 3));

如何写一个babel插件 ?步骤 1: 安装必要的依赖

首先，你需要安装 Babel 和相关工具。你可以使用 npm 或 yarn 来安装这些依赖。

npm install --save-dev @babel/core @babel/preset-env @babel/cli

步骤 2: 创建插件文件

创建一个新的 JavaScript 文件来编写你的插件。假设我们创建一个名为 my-babel-plugin.js 的文件。

步骤 3: 编写插件

Babel 插件的基本结构包括一个函数，该函数返回一个对象，其中包含 visitor 属性。visitor 对象定义了对 AST 节点的处理逻辑。

示例：将所有字符串字面量替换为大写，并将所有的var声明替换为let

// my-babel-plugin.js
module.exports = function() {
  return {
    visitor: {
      StringLiteral(path) {
        // 获取当前字符串字面量的值
        const oldValue = path.node.value;
        
        // 将字符串转换为大写
        const newValue = oldValue.toUpperCase();
        
        // 替换节点的值
        path.node.value = newValue;
      }
      VariableDeclaration(path) {
        if (path.node.kind === 'var') {
          path.node.kind = 'let';
        }
      }
    }
  };
};

步骤 4: 配置 Babel 使用插件

在项目的根目录下创建或编辑 .babelrc 文件（或 babel.config.json），并添加你的插件配置。

{
  "presets": ["@babel/preset-env"],
  "plugins": ["./my-babel-plugin"]
}

步骤 5: 测试插件

创建一个示例 JavaScript 文件 example.js 来测试你的插件。

// example.js
var greeting = "hello, world!";
console.log(greeting);

然后使用 Babel 命令行工具编译这个文件：

npx babel example.js --out-file example-compiled.js

检查生成的 example-compiled.js 文件，你应该会看到字符串已经被转换为大写：

let greeting = "HELLO, WORLD!";
console.log(greeting);