babel 基础概念 & 从零到一写一个 babel 插件

babel 基础概念

简单来说，做语法转换兼容的，
复杂一点的说，babel可以将我们写的 ES6+ 的Javascript语法转换为向后兼容的语法，以便能够在旧版本的浏览器或者其他环境运行。

babel 生成代码的三个阶段

• 解析（parse）
  • 输入：源码
  • 输出：AST
• 转换（transform）
  • 输入：AST
  • 输出：AST（此AST非彼AST，是被不同babel插件处理过的AST）
• 生成（generate）
  • 输入：AST
  • 输出：转换后的代码

我们平常使用的babel插件是在转换这个阶段生效的，在该阶段babel会去遍历AST的每个节点，我们可以对特定的节点做处理。那这里AST节点是什么呢，请看下面的解释和举例。

AST：抽象语法树

在开始编写插件之前，你需要了解什么是AST。AST是源代码的抽象语法结构的树状表示，它将代码中的结构表示为树中的节点。每个节点代表代码的一部分，例如变量声明、函数调用等。

假设下面这个函数是我们的源码

function square(n) {
  return n * n;
}

当我们使用babel进行解析后，会生成如下的AST：

- FunctionDeclaration:
  - id:
    - Identifier:
      - name: square
  - params [1]
    - Identifier
      - name: n
  - body:
    - BlockStatement
      - body [1]
        - ReturnStatement
          - argument
            - BinaryExpression
              - operator: *
              - left
                - Identifier
                  - name: n
              - right
                - Identifier
                  - name: n

我们可以看到，第一个节点是FunctionDeclaration，表示我们当前输入的是一个函数的声明，这个节点下是它的标识符（id），参数（params），函数体（body）。
在params和body下，又有下一层级的节点，这个大家可以对照源码看一下

遍历处理AST

从上面的例子我们可以了解到，如果希望对AST进行处理，也就是babel的第二阶段（转换），我们需要递归的对AST这个树结构进行遍历
将上方的AST用js对象表示就是这样

{
  type: "FunctionDeclaration",
  id: {
    type: "Identifier",
    name: "square"
  },
  params: [{
    type: "Identifier",
    name: "n"
  }],
  body: {
    type: "BlockStatement",
    body: [{
      type: "ReturnStatement",
      argument: {
        type: "BinaryExpression",
        operator: "*",
        left: {
          type: "Identifier",
          name: "n"
        },
        right: {
          type: "Identifier",
          name: "n"
        }
      }
    }]
  }
}

Visitors

Babel 使用 Visitors 来定义对 AST 节点的具体操作，比如检测特定的节点类型、对节点进行修改、添加新节点等。

Visitors 定义了插件在 AST 上执行的具体操作。一个 Visitor 对象通常包含一组方法，每个方法对应一个特定类型的 AST 节点。这些方法被称为 Visitor 方法，通常以要访问的节点类型名作为属性名。例如：

const visitor = {
  Identifier(path) {
    // 处理 Identifier 节点
  },
  BlockStatement(path) {
    // 处理 BlockStatement 节点
  },
  // 其他 Visitor 方法
};

Paths

在 Babel 中，paths 是一个对象，用于在插件中访问和操作 AST 中的节点。每个节点都有一个相应的路径（path），可以通过这个路径对象来访问节点的各种属性和方法。

你可以把 paths 想象成是一条通往 AST 中某个节点的路径，通过这条路径，你可以获取到节点的信息，比如节点的类型、属性、子节点等。这样，你就可以在插件中根据节点的具体情况来进行各种操作，比如修改节点、添加新节点、删除节点等。

比如，你可以在Visitors中使用path打印节点的名称：

const MyVisitor = {
  Identifier(path) {
    console.log("Visiting: " + path.node.name);
  }
};

State

在 Babel 插件开发中，state 是一个用于存储插件状态和数据的对象。它可以传递给 Babel 插件中的访问者（Visitors），允许插件在不同的访问者方法之间共享信息和状态。

我们在使用插件的时候，可能会给这个插件传递配置项，这个也可以通过state.opts读取到

// 假设我们在初始化一个插件，并传递了配置项
  plugins: [
    [myPlugin, { prefix: 'my_' }]
  ]
 
// 
const MyVisitor = {
  Identifier(path, state) {
    console.log(state.opts); // 打印出来：{ prefix: 'my_' }
  }
};

Scope

在 Babel 中，Scope（作用域）是指在 JavaScript 代码中的变量可访问的范围，Babel 中的 Scope 对象用于表示和管理这些作用域。

Scope 在 Babel 中的主要作用是帮助插件进行变量名的解析和处理。Babel 在遍历 AST（抽象语法树）时会构建一个作用域链，每个节点都会有一个对应的 Scope 对象，这个 Scope 对象包含了当前节点所在作用域的信息，比如变量、函数等。

从零到一写一个 babel 插件

项目初始化

mkdir first-babel-plugin
cd first-babel-plugin
npm init -y
npm install --save-dev @babel/core @babel/cli

插件编写

创建 index.js 文件

module.exports = function(babel) {
  const { types: t } = babel;
 
  return {
    visitor: {
      CallExpression(path) {
        if (
          path.node.callee.object &&
          path.node.callee.object.name === 'console' &&
          path.node.callee.property.name === 'log'
        ) {
          path.remove();
        }
      }
    }
  };
};

这个插件定义了一个访问者（visitor），它会遍历AST中的所有调用表达式（CallExpression）。如果这个调用表达式是console.log，它就会被移除。

使用插件

要使用这个插件，你可以在命令行中使用babel命令，并通过--plugins参数指定你的插件。首先，创建一个包含console.log的测试文件，比如test.js：

console.log("Hello, Babel Plugin!");

然后运行：

npx babel test.js --plugins=./index.js

你会看到，输出的代码中不再包含console.log语句。