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语句。
