SWC AST操作：JavaScript/TypeScript实现代码转换指南
在前端工程化领域，代码转换是构建工具的核心能力之一。SWC作为基于Rust的高性能JavaScript/TypeScript编译器，通过AST（抽象语法树）操作可以实现各类代码转换需求，比如语法降级、代码注入、自定义语法替换等。本文将介绍如何使用JavaScript/TypeScript操作SWC生成的AST，完成实际的代码转换场景。
SWC AST基础概念
AST是源代码的抽象语法结构树状表示，SWC会将输入的JavaScript/TypeScript代码解析为符合特定结构的AST节点。每个节点都有明确的类型标识，比如函数声明对应FunctionDeclaration，变量声明对应VariableDeclaration，我们可以通过遍历和操作这些节点实现代码转换。
SWC提供了官方的Node.js绑定包@swc/core，支持解析代码生成AST、遍历AST节点、生成转换后的代码等完整能力。使用前需要先安装依赖：
npm install @swc/core
基础示例：解析代码生成AST
首先我们看如何将一段JavaScript代码解析为SWC的AST结构，下面的示例会解析一个简单的变量声明语句，并打印AST结构：
const swc = require('@swc/core');
// 待解析的源代码
const sourceCode = 'const name = "swc";';
// 调用parse方法生成AST，指定语法为ecmascript
const ast = swc.parseSync(sourceCode, {
syntax: 'ecmascript',
// 如果是TypeScript代码，这里需要改为typescript
// syntax: 'typescript'
});
console.log(JSON.stringify(ast, null, 2));执行上述代码后，会输出变量声明对应的AST结构，其中可以看到type为VariableDeclaration的节点，内部包含标识符name和字符串字面量"swc"的相关信息。
实战场景：批量替换console.log调用
实际开发中我们经常需要移除或者替换代码中的console.log调用，比如生产环境构建时去掉所有日志输出。下面我们通过遍历AST节点，找到所有console.log的调用表达式，将其替换为空语句。
实现步骤
- 解析源代码生成AST
- 深度遍历AST的所有节点，判断节点类型是否为函数调用表达式
- 对于函数调用表达式，检查调用对象是否为
console，方法名是否为log - 匹配到的节点替换为空语句节点
- 将修改后的AST重新生成代码
完整实现代码
const swc = require('@swc/core');
const { Visitor } = require('@swc/core/visitor');
// 自定义AST访问器，继承SWC的Visitor类
class ConsoleLogRemover extends Visitor {
// 重写visitCallExpression方法，处理所有函数调用表达式节点
visitCallExpression(node) {
// 检查是否为console.log调用
if (
node.callee.type === 'MemberExpression' &&
node.callee.object.type === 'Identifier' &&
node.callee.object.value === 'console' &&
node.callee.property.type === 'Identifier' &&
node.callee.property.value === 'log'
) {
// 替换为空语句节点
return {
type: 'EmptyStatement'
};
}
// 非目标节点继续遍历子节点
return super.visitCallExpression(node);
}
}
// 待转换的源代码
const sourceCode = `
function test() {
console.log("开始执行");
const a = 1 + 2;
console.log("计算结果:", a);
return a;
}
`;
// 解析源代码生成AST
const ast = swc.parseSync(sourceCode, {
syntax: 'ecmascript'
});
// 创建访问器实例，遍历并转换AST
const remover = new ConsoleLogRemover();
const transformedAst = remover.visitProgram(ast);
// 将转换后的AST生成代码
const result = swc.printSync(transformedAst);
console.log("转换后的代码：");
console.log(result.code);上述代码执行后，输出的转换后代码中所有的console.log调用都会被替换为空语句，保留了其他逻辑不变。如果需要完全移除这些调用，还可以进一步处理空语句，或者直接将节点从父节点的表达式中移除。
进阶场景：TypeScript代码类型注解移除
SWC本身支持TypeScript语法解析，我们可以通过AST操作移除TypeScript代码中的类型注解，实现类似tsc --removeComments之外的自定义类型清理。下面的示例会移除变量声明、函数参数中的类型注解：
const swc = require('@swc/core');
const { Visitor } = require('@swc/core/visitor');
class TypeAnnotationRemover extends Visitor {
// 移除变量声明的类型注解
visitVariableDeclarator(node) {
// 如果有类型注解，设置为undefined
if (node.typeAnnotation) {
node.typeAnnotation = undefined;
}
return super.visitVariableDeclarator(node);
}
// 移除函数参数的类型注解
visitParameter(node) {
if (node.typeAnnotation) {
node.typeAnnotation = undefined;
}
// 移除参数默认值（如果需要保留默认值可以注释掉这部分）
if (node.default) {
node.default = undefined;
}
return super.visitParameter(node);
}
// 移除函数返回值的类型注解
visitFunction(node) {
if (node.returnType) {
node.returnType = undefined;
}
return super.visitFunction(node);
}
}
// 待处理的TypeScript代码
const tsSource = `
const age: number = 18;
function add(a: number, b: number): number {
return a + b;
}
`;
// 解析TypeScript代码生成AST
const ast = swc.parseSync(tsSource, {
syntax: 'typescript'
});
// 转换AST
const remover = new TypeAnnotationRemover();
const transformedAst = remover.visitProgram(ast);
// 生成转换后的代码
const result = swc.printSync(transformedAst, {
// 保留原始格式，不进行过多压缩
minify: false
});
console.log("移除类型注解后的代码：");
console.log(result.code);执行上述代码后，输出的JavaScript代码中将不再包含TypeScript的类型注解，得到纯JavaScript可执行的代码。
注意事项
- SWC的AST节点结构可能会随着版本更新略有变化，建议参考对应版本的官方文档确认节点字段
- 遍历AST时如果修改了节点结构，需要注意不要破坏AST的完整性，避免生成无效代码
- 如果需要处理复杂的转换逻辑，可以组合多个Visitor，或者针对不同节点类型实现更细粒度的遍历方法
- 对于大型代码文件的转换，SWC的Rust底层实现保证了很高的性能，相比同类工具效率提升明显
通过SWC的AST操作，我们可以灵活实现各类自定义代码转换需求，无论是工程化工具开发还是特殊的代码处理逻辑，都能获得高效的实现效果。掌握AST操作的基本思路后，还可以扩展到更多场景，比如自定义语法扩展、代码度量分析、依赖关系提取等。
SWCAST操作代码转换JavaScript编译TypeScript处理 本作品最后修改时间：2026-05-22 14:49:05