SWC 编译工具：Rust 打造的超快 JS/TS 转译器
SWC 编译工具：Rust 打造的超快 JS/TS 转译器
什么是 SWC？
SWC（Speedy Web Compiler）是一个基于 Rust 编写的下一代前端构建工具，核心功能是 JavaScript / TypeScript 转译。它既可以作为编译器使用，也提供打包能力（SWC Bundler，即 spack）。在转译性能上，SWC 比传统的 Babel 快 20 倍以上，单线程即可达到极高的吞吐量，特别适合大型项目与开发环境的即时编译。
SWC 的优势
- 极致的速度：Rust 原生性能 + 高度优化的并行编译。
- 广泛的兼容性：支持最新的 ECMAScript 标准、TypeScript、JSX/TSX 等。
- 可替换 Babel：大部分常见 Babel 插件都有对应的 SWC 替代方案。
- 生态友好：Next.js、Vite、Deno 等均已内置对 SWC 的支持。
快速入门
安装 SWC
需要安装 @swc/cli 和核心包 @swc/core：
npm install --save-dev @swc/cli @swc/core
安装后即可通过命令行使用 swc 命令。
基本使用
将 input.js 转译为 ES5 代码并输出到 output.js：
npx swc input.js -o output.js
默认情况下 SWC 会将代码转译为 ES5，并输出 CommonJS 模块。 可以通过配置文件进一步定制。
SWC 配置文件
在项目根目录创建 .swcrc 文件（JSON 格式），用于控制转译行为。
一个典型的 .swcrc 配置：
{
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true,
"decorators": false,
"dynamicImport": true
},
"transform": {
"react": {
"runtime": "automatic",
"importSource": "react"
}
},
"target": "es2015",
"loose": false,
"externalHelpers": true
},
"module": {
"type": "es6"
},
"sourceMaps": true
}
解析器配置 (jsc.parser)
- syntax：指定输入语言的语法，可选
ecmascript或typescript。 - tsx：是否解析 JSX 语法（用于 TypeScript + React）。
- decorators：是否启用装饰器提案（需额外插件）。
- dynamicImport：是否解析动态
import()语法。
转译目标 (jsc.target)
控制语法降级程度。可选项：
es3、es5es2015～es2022- 也可以设为
esnext，不做语法降级，仅进行模块转换。
模块系统 (module)
- type：输出模块格式，常见值：
commonjs、es6、amd。 - strict：是否输出
"use strict"。 - strictMode：若为
true，将所有模块视为严格模式。
插件与转换
React JSX 转换
在 jsc.transform.react 中配置：
"react": {
"runtime": "automatic", // 使用新版 JSX 转换
"importSource": "react" // 若使用 Preact 等可修改
}
若 runtime 设为 classic，则编译为 React.createElement 模式。
TypeScript 支持
SWC 能直接剥离 TypeScript 类型注解，但不会进行类型检查（仅转译）。配合 tsc --noEmit 可完成类型验证。
装饰器支持需引入 swc-plugin-decorators 等插件，并设置：
"jsc": {
"parser": {
"decorators": true
},
"transform": {
"decoratorVersion": "2022-03", // 或 "2021-12"
"decoratorMetadata": true
}
}
常见插件
- swc-plugin-transform-imports：按需转译导入路径。
- swc-plugin-emotion：CSS-in-JS 编译优化。
- swc-plugin-styled-components：styled-components 服务端渲染支持。
SWC 与主流构建工具集成
在 Webpack 中使用 swc-loader
安装 swc-loader 并替换 babel-loader：
npm install -D swc-loader
webpack.config.js 配置：
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'swc-loader',
options: {
// 此处可覆盖 .swcrc 配置
jsc: {
parser: { syntax: 'typescript' },
target: 'es2015'
}
}
}
}
]
}
};
注意：swc-loader 会优先使用项目根目录的 .swcrc，未指定选项时将自动读取。
在 Vite 中使用
Vite 官方提供了 @vitejs/plugin-react-swc，用于替代默认的 Babel 解析器：
npm install -D @vitejs/plugin-react-swc
在 vite.config.ts 中：
import react from '@vitejs/plugin-react-swc';
export default {
plugins: [react()]
};
在 Next.js 中
Next.js 12+ 默认使用 SWC 作为编译器，你可以在 next.config.js 的 swcMinify 和 compiler 选项中进行自定义，通常无需额外安装。
SWC 与 Babel 的对比
| 特性 | SWC | Babel |
|---|---|---|
| 性能 | 极高（Rust 实现） | 较慢（Node.js 单线程） |
| 语法降级 | 支持 ES2022 到 ES5 | 通过插件支持同样范围 |
| TypeScript 转译 | 原生支持 | 需要 @babel/preset-typescript |
| 插件生态 | 快速增长，但不如 Babel 丰富 | 极其丰富，支持任意 AST 操作 |
| 自定义程度 | 较低，难以编写自定义转换 | 非常灵活，可编写自定义插件 |
| 适用场景 | 生产环境快速构建、大型项目 | 需要高度定制转译流程的项目 |
何时选择 SWC？
- 对开发/构建速度有极致要求。
- 使用 Next.js、Vite 等已集成 SWC 的框架。
- 团队不需要深度自定义 AST 转换，常用功能已覆盖。
何时仍选 Babel？
- 依赖大量专属 Babel 插件且 SWC 暂无替代。
- 需要编写自创的语法转换逻辑。
- 对生态多样性有较高要求。
常见问题
如何查看 SWC 生成的代码？
使用 -o console 可将结果输出到终端：
swc input.ts -o console
如何调试 SWC 的编译过程？
使用 --debug 参数打印详细信息，或利用 sourceMaps: 'inline' 在浏览器中直接映射源码。
SWC 支持装饰器 Stage 3 吗？
SWC 通过插件支持 TC39 装饰器提案（"decoratorVersion": "2022-03"），并支持元数据反射（需额外配置和 reflect-metadata 库）。
能否同时使用 SWC 和 Babel？
一般不建议，两者功能重叠，容易产生冲突。如需在 SWC 环境中执行 Babel 插件，可尝试通过 swc-plugin-babel 桥接，但性能会受影响。
SWC 支持 CSS 或 HTML 吗？
SWC 核心仅处理 JavaScript/TypeScript，CSS/HTML 的编译需借助其他工具（如 Lightning CSS 等）。SWC 打包工具 spack 目前也停留于实验阶段。
总结
SWC 是前端高速编译的杰出代表，借助 Rust 的性能优势，它将 JS/TS 转译速度提升到了全新水平。对于追求效率的开发者，将项目中的 Babel 替换为 SWC 通常能获得显著的速度提升，且配置迁移成本低廉。随着 Next.js、Vite 等一流工具的深度集成，SWC 已经成为现代 JavaScript 生态的重要组成部分。