SWC实现JS/TSAST转换方法解析

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《SWC中JavaScript/TypeScript AST转换实现》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

本文探讨了在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的结构和配置选项生成最终的代码。

因此，实现自定义代码转换的流程如下：

1. 使用swc.parse()将原始代码解析为AST。
2. 在JavaScript/TypeScript中对这个AST对象进行遍历和修改，实现所需的转换逻辑。
3. 使用swc.transform()将修改后的AST转换回最终的代码。

实践示例：修改导入路径

以下示例演示了如何使用@swc/core库，在AST层面修改代码中的导入路径，将所有.ts、.mts和.cts后缀的导入语句改为.js后缀。

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);
});

代码解析：

1. 导入SWC核心库：import swc from '@swc/core' 是使用SWC功能的入口。
2. swc.parse()：
   • 第一个参数是待处理的源代码字符串。
   • 第二个参数是解析选项，syntax: 'typescript' 告诉SWC按TypeScript语法解析，这样它能正确识别类型声明等。target: 'esnext' 指定了代码的目标ES版本。
3. 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的类型定义中或相关文档中）将非常有帮助。
4. swc.transform()：
   • 第一个参数是修改后的AST对象。
   • 第二个参数是转换选项，例如jsc.target指定了输出代码的目标ES版本。
   • 示例中注释掉了minify选项，因为它在某些SWC版本中可能存在已知问题，建议在使用前进行充分测试。

注意事项与总结

1. AST结构理解：成功进行AST操作的关键在于深入理解SWC的AST节点类型及其属性。这通常需要查阅SWC的类型定义或相关文档。
2. 性能考量：对于非常大的代码库，手动遍历和修改AST可能会比使用原生Rust插件效率略低。然而，对于大多数自定义转换需求，这种方法已经足够高效。
3. 错误处理与健壮性：在实际应用中，需要更全面的错误处理和对各种AST节点情况的覆盖，以确保转换逻辑的健壮性。
4. SWC版本：SWC项目正在积极开发中，API和AST结构可能会有微小变化。请确保您使用的@swc/core版本与您的转换逻辑兼容。
5. 替代方案：如果您的需求非常复杂，且需要深度集成到SWC的编译流程中，或者对性能有极致要求，那么学习Rust并编写原生SWC插件可能是更合适的选择。

通过上述基于AST的操作，即使没有直接的JavaScript/TypeScript插件API，开发者仍然能够利用SWC强大的解析和转换能力，实现高度定制化的代码转换需求。这种方法提供了极大的灵活性，使得JavaScript/TypeScript开发者也能充分利用SWC在构建工具链中的优势。

理论要掌握，实操不能落！以上关于《SWC实现JS/TSAST转换方法解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！