本文探讨了在SWC中如何利用JavaScript/TypeScript进行代码转换。尽管目前没有官方的JS/TS插件API，但通过深入理解和操作抽象语法树（AST），开发者可以使用@swc/core库的parse和transform方法，在代码解析和生成之间插入自定义逻辑，实现灵活的代码转换需求。文章将通过具体示例，演示如何修改AST节点以达到预期的转换效果，为希望在SWC生态中进行JS/TS代码优化的开发者提供实用指导。
理解SWC的AST操作机制
许多开发者在探索swc的插件系统时，常常会疑惑是否可以使用javascript或typescript编写插件，类似于babel的插件生态。尽管目前swc官方文档主要提及rust编写的插件，且成熟的js/ts插件api仍在演进中，但这并不意味着无法使用javascript/typescript对代码进行高级转换。
SWC的核心能力之一是其高效的解析和转换能力。它能够将源代码解析成抽象语法树（AST），并能将修改后的AST重新生成为代码。这个过程提供了一个关键的接口：在源代码被解析成AST之后，但在AST被转换回代码之前，开发者可以对AST进行任意的修改。这种AST层面的数据操作，实际上就是实现自定义“插件逻辑”的有效途径。
SWC提供@swc/core库，其中包含parse和transform两个核心API：
- swc.parse(source, options): 将给定的源代码字符串解析成一个AST（表现为Program对象）。这个AST是源代码的结构化表示，包含了代码中的所有元素，如变量声明、函数、导入语句等。
- swc.transform(ast, options): 将一个AST（Program对象）转换回源代码字符串。在转换过程中，SWC会根据AST的结构和配置选项生成最终的代码。
因此，实现自定义代码转换的流程如下：
- 使用swc.parse()将原始代码解析为AST。
- 在JavaScript/TypeScript中对这个AST对象进行遍历和修改，实现所需的转换逻辑。
- 使用swc.transform()将修改后的AST转换回最终的代码。
实践示例：修改导入路径
以下示例演示了如何使用@swc/core库，在AST层面修改代码中的导入路径，将所有.ts、.mts和.cts后缀的导入语句改为.js后缀。
立即学习“Java免费学习笔记（深入）”；
import swc from '@swc/core'; // 待转换的源代码 let source = ` import abc from './abc.ts' import def from "./def.mts" import('./ghi.cts') const foo = require('./bar.ts') `; async function transformImports(code: string) { // 1. 解析源代码为AST let program = await swc.parse(code, { syntax: 'typescript', // 指定源代码语法为TypeScript comments: false, // 不保留注释 script: true, // 视为脚本文件 target: 'esnext', // 目标ES版本 }); // 2. 实现自定义的插件逻辑：遍历并修改AST // AST的根节点是Program，其body属性包含了顶层语句数组 for (let item of program.body) { switch (item.type) { // 处理 ImportDeclaration 类型的节点（如 import abc from './abc.ts'） case 'ImportDeclaration': // 导入声明的source属性包含导入路径的字面量信息 // raw属性是原始的字符串表示，如 "'./abc.ts'" if (item.source && item.source.raw) { item.source.raw = item.source.raw .replace('.ts"', '.js"') .replace('.mts"', '.js"') .replace('.cts"', '.js"'); } break; // 处理 ExpressionStatement 类型的节点，例如动态导入 import('./ghi.cts') case 'ExpressionStatement': // 检查表达式是否为 CallExpression (函数调用) if (item.expression.type === 'CallExpression') { const callExpr = item.expression; // 检查调用的callee是否为Import (动态导入) if (callExpr.callee.type === 'Import') { // 动态导入的参数是数组，通常第一个参数是导入路径 if (callExpr.arguments.length > 0 && callExpr.arguments[0].expression.type === 'StringLiteral') { const arg = callExpr.arguments[0].expression; arg.raw = arg.raw .replace('.ts"', '.js"') .replace('.mts"', '.js"') .replace('.cts"', '.js"'); } } } break; // 针对 CommonJS require() 的处理（虽然SWC主要用于ESM，但也可处理） case 'VariableDeclaration': for (const declarator of item.declarations) { if (declarator.init && declarator.init.type === 'CallExpression' && declarator.init.callee.type === 'Identifier' && declarator.init.callee.value === 'require') { if (declarator.init.arguments.length > 0 && declarator.init.arguments[0].expression.type === 'StringLiteral') { const arg = declarator.init.arguments[0].expression; arg.raw = arg.raw .replace('.ts"', '.js"') .replace('.mts"', '.js"') .replace('.cts"', '.js"'); } } } break; default: // 打印其他类型的节点，以便了解AST结构 // console.log(`Unhandled node type: ${item.type}`); } } // 3. 将修改后的AST转换回代码 const transformedCode = await swc.transform(program, { jsc: { target: 'esnext', // 目标ES版本 // minify: { // // 注意：SWC的minify功能在某些版本可能存在已知问题， // // 使用时请谨慎测试或避免在此阶段使用 // // compress: {}, // mangle: {}, // }, }, }); return transformedCode.code; } // 执行转换并打印结果 transformImports(source).then(result => { console.log('--- Original Code ---'); console.log(source); console.log('n--- Transformed Code ---'); console.log(result); }).catch(error => { console.error('Transformation failed:', error); });
代码解析：
- 导入SWC核心库：import swc from ‘@swc/core’ 是使用SWC功能的入口。
- swc.parse()：
- 第一个参数是待处理的源代码字符串。
- 第二个参数是解析选项，syntax: ‘typescript’ 告诉SWC按TypeScript语法解析，这样它能正确识别类型声明等。target: ‘esnext’ 指定了代码的目标ES版本。
- AST遍历与修改：
- program.body 包含了源代码顶层的所有语句（如导入声明、函数声明、变量声明等）。
- 通过遍历program.body，我们可以检查每个item的type属性来识别不同类型的AST节点。
- 对于ImportDeclaration（ESM导入语句），其source属性是一个包含导入路径的StringLiteral节点。我们直接修改item.source.raw属性，将.ts、.mts、.cts替换为.js。raw属性是包含引号的原始字符串，因此替换时需保留引号。
- 对于动态导入import()，它通常被包裹在ExpressionStatement中，其内部是一个CallExpression，callee为Import。我们同样修改其参数中的字符串字面量。
- 对于require()，它通常是VariableDeclaration中的CallExpression，其callee为Identifier且值为require。
- 理解SWC的AST结构对于编写高效的转换逻辑至关重要。SWC的AST结构与ESTree规范相似，但也有其特有的部分。查阅SWC的AST定义（通常在@swc/core的类型定义中或相关文档中）将非常有帮助。
- swc.transform()：
- 第一个参数是修改后的AST对象。
- 第二个参数是转换选项，例如jsc.target指定了输出代码的目标ES版本。
- 示例中注释掉了minify选项，因为它在某些SWC版本中可能存在已知问题，建议在使用前进行充分测试。
注意事项与总结
- AST结构理解：成功进行AST操作的关键在于深入理解SWC的AST节点类型及其属性。这通常需要查阅SWC的类型定义或相关文档。
- 性能考量：对于非常大的代码库，手动遍历和修改AST可能会比使用原生Rust插件效率略低。然而，对于大多数自定义转换需求，这种方法已经足够高效。
- 错误处理与健壮性：在实际应用中，需要更全面的错误处理和对各种AST节点情况的覆盖，以确保转换逻辑的健壮性。
- SWC版本：SWC项目正在积极开发中，API和AST结构可能会有微小变化。请确保您使用的@swc/core版本与您的转换逻辑兼容。
- 替代方案：如果您的需求非常复杂，且需要深度集成到SWC的编译流程中，或者对性能有极致要求，那么学习Rust并编写原生SWC插件可能是更合适的选择。
通过上述基于AST的操作，即使没有直接的JavaScript/TypeScript插件API，开发者仍然能够利用SWC强大的解析和转换能力，实现高度定制化的代码转换需求。这种方法提供了极大的灵活性，使得JavaScript/TypeScript开发者也能充分利用SWC在构建工具链中的优势。
评论（已关闭）
评论已关闭