SWC中基于JavaScript/TypeScript的AST操作实现代码转换
在前端工程化领域，代码转换是一个核心需求，无论是将高版本ES语法向下兼容，还是实现自定义的业务代码逻辑改写，都离不开对抽象语法树（AST）的操作。SWC作为一款基于Rust的高性能JavaScript/TypeScript编译器，提供了完善的AST操作能力，相比传统的Babel，它在处理速度上有着显著优势，非常适合需要高频执行代码转换的场景。
SWC的AST基础概念
SWC处理代码转换的核心流程分为三步：首先将源代码解析为AST，然后对AST节点进行遍历和修改，最后将修改后的AST重新生成目标代码。其中AST是代码的树形结构表示，每一个语法元素（比如变量声明、函数调用、条件判断）都会对应一个AST节点，节点中包含该语法元素的类型、位置、具体内容等信息。
SWC的AST节点类型和结构遵循类似的规范，不同类型的节点有不同的属性。比如一个变量声明节点会包含声明的关键字（let/const/var）、声明的变量列表等信息；一个函数调用节点会包含调用的函数名、传入的参数列表等信息。我们可以通过SWC提供的API获取和操作这些节点。
环境准备与基础解析示例
首先我们需要安装SWC相关的依赖，这里以Node.js环境为例，执行以下命令安装核心包：
# 安装SWC核心编译包和TypeScript支持 npm install @swc/core @swc/types
下面的代码演示了如何将一段JavaScript代码解析为AST，并打印出根节点的类型：
// 引入SWC核心模块
const swc = require('@swc/core');
// 待解析的JavaScript代码
const sourceCode = `
const name = 'swc';
function sayHello() {
console.log('hello ' + name);
}
`;
// 解析代码为AST，这里指定语法为ecma，支持es模块
async function parseCode() {
const ast = await swc.parse(sourceCode, {
syntax: 'ecma',
ecmaVersion: 2020,
sourceType: 'module'
});
// 打印AST根节点类型，输出应该是Program
console.log('AST根节点类型:', ast.type);
// 打印顶层语句数量
console.log('顶层语句数量:', ast.body.length);
}
parseCode();运行上述代码后，可以看到控制台输出AST根节点类型为Program，这是所有JavaScript/TypeScript模块AST的顶层节点类型，body属性中存放了模块中的所有顶层语句。
遍历AST节点实现代码转换
要实现代码转换，核心是遍历AST节点并修改目标节点。SWC提供了visit相关的API来遍历AST，我们可以自定义遍历逻辑，针对特定类型的节点进行处理。下面是一个示例，实现将代码中所有的console.log调用替换为console.info调用：
const swc = require('@swc/core');
const { Visitor } = require('@swc/core/visitor');
// 自定义访问者类，继承SWC的Visitor
class LogReplacer extends Visitor {
// 重写visitCallExpression方法，处理所有函数调用表达式节点
visitCallExpression(node) {
// 判断是否是console.log调用
if (
node.callee.type === 'MemberExpression' &&
node.callee.object.type === 'Identifier' &&
node.callee.object.name === 'console' &&
node.callee.property.type === 'Identifier' &&
node.callee.property.name === 'log'
) {
// 替换为console.info，修改属性的name为info
node.callee.property.name = 'info';
}
// 继续遍历子节点，确保其他节点也被处理
return super.visitCallExpression(node);
}
}
// 待处理的源代码
const source = `
console.log('start');
const a = 1;
console.log('a的值是:', a);
function test() {
console.log('in test');
}
`;
async function transformCode() {
// 解析源代码为AST
const ast = await swc.parse(source, {
syntax: 'ecma',
ecmaVersion: 2020,
sourceType: 'script'
});
// 创建访问者实例并遍历AST
const replacer = new LogReplacer();
const transformedAst = replacer.visitProgram(ast);
// 将修改后的AST重新生成代码
const result = await swc.print(transformedAst);
console.log('转换后的代码:');
console.log(result.code);
}
transformCode();上述代码中，我们自定义了LogReplacer类继承SWC的Visitor，重写了visitCallExpression方法，在函数调用表达式节点中判断是否为console.log调用，如果是就将其方法名修改为info。最后通过swc.print方法将修改后的AST重新生成可执行的代码。
复杂转换场景：添加自定义代码注入
除了修改现有节点，我们还可以实现更复杂的转换，比如在所有的函数定义开头注入一段计时代码。下面的示例实现了在每个函数体的最前面添加console.time('函数名')，在函数结束前添加console.timeEnd('函数名')的统计逻辑：
const swc = require('@swc/core');
const { Visitor } = require('@swc/core/visitor');
// 自定义访问者，处理所有函数声明
class FunctionTimerInjector extends Visitor {
visitFunctionDeclaration(node) {
// 获取函数名，如果没有函数名（比如匿名函数赋值给变量的情况可以额外处理）
const funcName = node.identifier.name;
if (!funcName) {
return super.visitFunctionDeclaration(node);
}
// 构造console.time的调用表达式节点
const timeCall = {
type: 'ExpressionStatement',
expression: {
type: 'CallExpression',
callee: {
type: 'MemberExpression',
object: { type: 'Identifier', name: 'console', optional: false },
property: { type: 'Identifier', name: 'time', optional: false }
},
arguments: [
{ type: 'StringLiteral', value: funcName, hasEscape: false }
],
typeArguments: undefined
},
directive: undefined
};
// 构造console.timeEnd的调用表达式节点
const timeEndCall = {
type: 'ExpressionStatement',
expression: {
type: 'CallExpression',
callee: {
type: 'MemberExpression',
object: { type: 'Identifier', name: 'console', optional: false },
property: { type: 'Identifier', name: 'timeEnd', optional: false }
},
arguments: [
{ type: 'StringLiteral', value: funcName, hasEscape: false }
],
typeArguments: undefined
},
directive: undefined
};
// 将time调用插入到函数体最前面
node.body.stmts.unshift(timeCall);
// 遍历函数体原来的语句，在return语句前插入timeEnd调用
const newStmts = [];
for (const stmt of node.body.stmts) {
if (stmt.type === 'ReturnStatement') {
newStmts.push(timeEndCall);
}
newStmts.push(stmt);
}
// 如果最后没有return语句，在函数体末尾添加timeEnd调用
if (newStmts[newStmts.length - 1] !== timeEndCall) {
newStmts.push(timeEndCall);
}
node.body.stmts = newStmts;
return super.visitFunctionDeclaration(node);
}
}
const source = `
function add(a, b) {
return a + b;
}
function multiply(x, y) {
const result = x * y;
return result;
}
`;
async function injectTimer() {
const ast = await swc.parse(source, {
syntax: 'ecma',
ecmaVersion: 2020,
sourceType: 'script'
});
const injector = new FunctionTimerInjector();
const transformedAst = injector.visitProgram(ast);
const result = await swc.print(transformedAst);
console.log('注入计时逻辑后的代码:');
console.log(result.code);
}
injectTimer();这个示例中，我们手动构造了console.time和console.timeEnd对应的AST节点，然后通过修改函数体的语句列表实现了代码注入。需要注意的是，实际场景中如果需要处理更多类型的函数（比如箭头函数、函数表达式），还需要额外重写对应的visit方法，确保覆盖所有场景。
TypeScript代码的AST转换注意事项
处理TypeScript代码时，只需要在解析阶段指定syntax为typescript即可，SWC会自动处理类型相关的语法，AST节点中会包含类型相关的属性，但大部分转换逻辑和JavaScript是通用的。下面的示例演示了转换TypeScript代码的基础配置：
const swc = require('@swc/core');
const tsSource = `
interface User {
name: string;
age: number;
}
const user: User = { name: 'test', age: 18 };
function getUserInfo(user: User): string {
return \`Name: \${user.name}, Age: \${user.age}\`;
}
`;
async function parseTypeScript() {
const ast = await swc.parse(tsSource, {
syntax: 'typescript',
tsconfig: {
target: 'es2020'
}
});
console.log('TypeScript AST根节点类型:', ast.type);
// 打印顶层语句中的变量声明
const varDecl = ast.body.find(item => item.type === 'VariableDeclaration');
if (varDecl) {
console.log('变量声明类型:', varDecl.type);
console.log('变量名:', varDecl.declarations[0].id.name);
}
}
parseTypeScript();需要注意的是，如果转换后的代码需要移除TypeScript类型，可以在生成代码时通过SWC的配置指定去掉类型相关的内容，不需要手动处理AST中的类型节点，SWC会自动完成类型擦除的工作。
总结
SWC基于AST的代码转换能力既高效又灵活，从简单的节点修改到复杂的逻辑注入都可以实现。核心流程可以归纳为：解析代码得到AST、自定义遍历逻辑修改AST节点、将修改后的AST重新生成目标代码。在实际使用中，我们可以根据业务需求扩展访问者的逻辑，覆盖更多AST节点类型，实现符合场景的代码转换能力。相比传统工具，SWC的性能优势在大型项目或者需要高频执行转换的场景下会更加明显。
SWCAST操作代码转换TypeScript编译前端工程化 本作品最后修改时间：2026-05-22 14:45:42