Rust的SWC CLI工具使用指南：高性能JavaScript/TypeScript转译与构建工具

什么是SWC

SWC(Speedy Web Compiler)是一个用Rust编写的超快速JavaScript/TypeScript编译器。它可以将现代JavaScript/TypeScript代码转译为向后兼容的JavaScript版本，同时提供打包、压缩等功能。

安装SWC CLI

首先需要安装SWC的命令行工具：

npm install -g @swc/cli @swc/core

或者使用yarn:

yarn global add @swc/cli @swc/core

基本使用

转译单个文件

swc src/file.js -o dist/file.js

转译整个目录

swc src -d dist

配置选项

SWC可以通过.swcrc配置文件或命令行参数进行配置。以下是常用配置示例：

基本配置文件(.swcrc)

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true
    },
    "target": "es5",
    "loose": false,
    "minify": {
      "compress": false,
      "mangle": false
    }
  },
  "minify": false,
  "module": {
    "type": "commonjs"
  }
}

常用命令行选项

• --watch/-w: 监听文件变化
• --source-maps/-s: 生成source maps
• --config-file: 指定配置文件路径
• --sync: 同步执行(默认是异步)

示例用法

转译TypeScript到ES5

swc src --out-dir dist --config-file .swcrc

使用watch模式

swc src -d dist -w

生成source maps

swc src -d dist --source-maps

压缩输出

swc src -d dist --minify

与Babel比较

SWC相比Babel有以下优势：

1. 速度更快(通常快20倍左右)
2. 内存占用更低
3. 内置打包功能
4. 由Rust编写，性能更高

高级功能

作为JavaScript API使用

const { transform } = require('@swc/core');

async function main() {
  const output = await transform(
    `const x: number = 1; console.log(x);`,
    {
      jsc: {
        parser: {
          syntax: 'typescript'
        }
      }
    }
  );
  
  console.log(output.code);
}

main();

自定义插件

SWC支持使用Rust编写自定义插件：

use swc_ecma_visit::Fold;

pub struct RemoveConsole;

impl Fold for RemoveConsole {
    fn fold_call_expr(&mut self, expr: CallExpr) -> CallExpr {
        if let Callee::Expr(expr) = &expr.callee {
            if let Expr::Member(MemberExpr { obj, prop, .. }) = &**expr {
                if let Expr::Ident(ident) = &**obj {
                    if ident.sym == *"console" {
                        // 返回空表达式
                        return CallExpr {
                            callee: ExprOrSuper::Expr(Box::new(Expr::Ident(Ident::new(
                                "void".into(),
                                DUMMY_SP,
                            )))),
                            args: vec![],
                            span: DUMMY_SP,
                        };
                    }
                }
            }
        }
        expr
    }
}

常见问题解决

1. 安装问题：确保你的Node.js版本>=12
2. 性能问题：对于大型项目，考虑使用--sync选项
3. 配置问题：使用swc --help查看所有可用选项

SWC是一个强大的工具，特别适合需要高性能构建的中大型JavaScript/TypeScript项目。

完整示例DEMO

下面是一个完整的项目示例，展示如何使用SWC进行TypeScript项目的构建：

1. 首先创建项目结构：

my-project/
├── src/
│   ├── index.ts
│   └── utils.ts
├── dist/
└── .swcrc

1. 示例index.ts文件内容：

// src/index.ts
import { greet } from './utils';

const message: string = greet('SWC');
console.log(message);

1. 示例utils.ts文件内容：

// src/utils.ts
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

1. .swcrc配置文件：

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "decorators": false
    },
    "target": "es2015",
    "minify": {
      "compress": false,
      "mangle": false
    }
  },
  "module": {
    "type": "commonjs"
  }
}

1. 添加package.json脚本：

{
  "scripts": {
    "build": "swc src -d dist",
    "watch": "swc src -d dist -w",
    "build:prod": "swc src -d dist --minify"
  }
}

1. 运行构建命令：

npm run build

1. 查看输出结果（dist目录）：

// dist/index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var utils_1 = require("./utils");
var message = (0, utils_1.greet)('SWC');
console.log(message);

// dist/utils.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.greet = void 0;
function greet(name) {
    return "Hello, ".concat(name, "!");
}
exports.greet = greet;