SWC中基于JavaScript/TypeScript的AST操作实现代码转换

花韻仙語

发布时间：2025-08-15 20:42:00

551人浏览过

来源于php中文网

原创

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的结构和配置选项生成最终的代码。

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

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

实践示例：修改导入路径

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

SV-Cart网店系统

SV-Cart是开源的电子商务平台。多语言，国际化SV-CART网店系统是一套可以支持各个国家的语言显示的国际电子商务系统，现已支持中文简体、英文、日文、德文和法文，土耳其文，可实现这五种语言在同一平台上的相互转换。免费、开源SV-CART网店系统是一项新的专业开放源代码的WEB2.0网上商城系统，是一套集网上购物和网站内容管理于一体的电子商务解决方案。易操作、多功能SV-CART系统注重操作上的

下载

立即学习“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版本中可能存在已知问题，建议在使用前进行充分测试。