无需登录 数据私有 本地保存

Babel 插件在线测试器 - 开发并验证自定义插件

开发工具 编译工具 AST Babel 插件 测试
8
0
0
0

Babel 插件在线测试器

在浏览器中实时编写、测试和验证自定义 Babel 插件，无需安装任何依赖

正在加载 Babel Standalone...
快速示例： 反转标识符 移除 console.log 添加追踪日志 const → let JSX 转换
源代码
Babel 插件
转换结果

常见问题与知识点

Babel 插件是一个 JavaScript 函数，它接收 Babel 的 API 对象，返回一个包含 visitor 属性的对象。当 Babel 解析源代码生成 AST（抽象语法树）后，会遍历每个节点。visitor 中定义的每个方法对应一种 AST 节点类型（如 Identifier、FunctionDeclaration、CallExpression 等），Babel 在遍历到对应节点时会调用这些方法，从而允许你修改、替换或删除节点。
最简单的插件只需定义一个 visitor 对象。例如，反转所有标识符名称： 
{
  Identifier(path) {
    path.node.name = path.node.name
      .split('').reverse().join('');
  }
}
在本工具中，你只需在"Babel 插件"编辑区编写 visitor 对象（或包含 visitor 键的完整对象），系统会自动将其包装为标准的 Babel 插件函数。
常见的 AST 节点类型包括：Identifier（标识符）、StringLiteral（字符串字面量）、CallExpression（函数调用）、FunctionDeclaration（函数声明）、VariableDeclaration（变量声明）、BinaryExpression（二元表达式）、IfStatement（条件语句）等。推荐使用 AST Explorer 在线查看任意代码的 AST 结构，这对于编写插件非常有帮助。
path.node — 当前 AST 节点；path.parent — 父节点路径；path.scope — 作用域信息；path.replaceWith(node) — 替换节点；path.remove() — 删除节点；path.insertBefore() / path.insertAfter() — 插入兄弟节点；path.traverse(visitor) — 在子树中继续遍历；path.skip() — 跳过当前节点的子节点遍历。
调试技巧：① 在 visitor 方法中使用 console.log(path.node) 打印节点信息；② 使用本工具的在线测试器快速验证插件效果；③ 使用 AST Explorer 可视化查看转换前后的 AST；④ 在本地项目中，使用 @babel/core 的 transformSync 配合 Node.js 调试器；⑤ 善用 path.type 确认节点类型，避免处理错误的节点。
本工具使用 @babel/standalone（Babel 的浏览器版本），它包含了 Babel 核心编译器、解析器、代码生成器以及常用预设（env、react、typescript），全部在浏览器本地运行。你的代码不会上传到任何服务器，所有转换都在本地完成，安全且即时。
本工具智能识别多种输入格式：① 纯 visitor 对象（如 { Identifier(path) {...} }）；② 包含 visitor 键的对象（如 { visitor: { Identifier(path) {...} } }）；③ 完整的插件函数（如 function(babel) { return { visitor: {...} }; }）。系统会自动检测并正确处理。如果代码以 function 开头，将直接作为插件函数执行；否则会被自动包装。
通过勾选工具栏中的预设，你可以启用：env（ES6+ 语法转换，支持按目标环境编译）、react（JSX 语法支持）、typescript（TypeScript 语法支持）。你还可以选择目标浏览器版本（如 "> 1%"）来控制编译的兼容性级别。源码类型可选 Module、Script 或自动检测。
🔧 相关工具