swc

SWC 是一个高性能的 JavaScript/TypeScript 编译器和压缩器。它是用 Rust 编写的,旨在提供比现有工具更高的性能。

步骤 1：安装依赖 首先,安装 SWC 的命令行工具和核心库：

@swc/cli: SWC 的命令行工具,用于在命令行中运行 SWC。
@swc/core: SWC 的核心库,提供编译和压缩功能。

1pnpm add -D @swc/cli @swc/core

步骤 2：配置 SWC 在项目的根目录下新建一个 .swcrc 文件,文件内容如下：

1// https://swc.rs/docs/configuration/compilation 
2{
3 // 汇编配置
4 "jsc": {
5  "parser": {
6   "syntax": "typescript", // 指定语法为 TypeScript
7   "tsx": true, // 启用 TSX 支持,用于 React 开发
8   "decorators": false // 禁用装饰器语法
9  },
10  "target": "es5", // 设置编译目标为 ECMAScript 5
11  "transform": {
12   "react": {
13    "pragma": "React.createElement", // 指定 React.createElement 作为 JSX 转换函数
14    "pragmaFrag": "React.Fragment", // 指定 React.Fragment 作为 JSX 片段
15    "throwIfNamespace": true, // 在命名空间中使用 JSX 时抛出错误
16    "development": false, // 禁用开发模式
17    "useBuiltins": false // 禁用内置函数优化
18   }
19  }
20 },
21 // 模块配置
22 "module": {
23  "type": "commonjs" // 指定模块类型为 CommonJS
24 },
25 // 压缩配置
26 "minify": false // 禁用代码压缩
27}

步骤 3：创建测试文件 在 src 目录下分别创建以下测试文件：test.js、example.ts 及 App.tsx,以测试 SWC 的编译功能。

1// 这个文件包含一个简单的箭头函数用于测试。
2const fn = () => {
3 console.log("test")
4}

1const greet = (name: string): string => {
2 return `Hello, ${name}!`
3}
4console.log(greet("World"))

1import react from "react"
2import { createRoot } from "react-dom/client"
3const App = () => {
4 return <div>Code Better</div>
5}
6createRoot(document.getElementById("root")).render(<App />)

:::

步骤 4：添加构建命令 在 package.json 文件中添加构建脚本,以便使用 SWC 编译代码：

1{
2  "scripts": {
3    "build": "swc src -d lib"
4  }
5}

步骤 5：执行构建 最后,运行以下命令进行构建：

1pnpm run build

这将使用 SWC 编译 src 目录下的代码,并将结果输出到 lib 目录。

swc#

swc