OXC 全家桶实战：从零搭建极速前端开发环境

恭喜你坚持到了最后一篇！在前面的七篇文章中，我们逐一学习了 OXC 的六大模块：

• Oxlint：代码检查，比 ESLint 快 50 倍
• Oxfmt：代码格式化，比 Prettier 快 20 倍
• Parser：代码解析，比 Babel Parser 快 20 倍
• Transformer：代码转换，比 Babel 快 18 倍
• Minifier：代码压缩，比 Terser 快 5 倍
• Resolver：模块解析，比 enhanced-resolve 快 5 倍

今天，我们要把这些模块组合起来，搭建一个完整的极速前端开发环境！

回顾六大模块

在开始实战之前，让我们快速回顾每个模块的核心价值：

模块	用途	替代品	典型场景
Oxlint	代码检查	ESLint	开发时实时检查、CI 流水线
Oxfmt	代码格式化	Prettier	保存时自动格式化、提交前格式化
Parser	代码解析	@babel/parser	构建代码工具、AST 分析
Transformer	代码转换	Babel	TypeScript 编译、JSX 转换
Minifier	代码压缩	Terser	生产环境打包优化
Resolver	模块解析	enhanced-resolve	自定义构建工具、路径别名

适用场景总结

开发阶段
├── Oxlint     → 实时代码检查
├── Oxfmt      → 保存时格式化
└── Resolver   → 模块路径解析

构建阶段
├── Parser     → 解析代码生成 AST
├── Transformer → TypeScript/JSX 转换
├── Resolver   → 依赖解析
└── Minifier   → 生产代码压缩

实战：搭建完整工作流

让我们从零开始，搭建一个使用 OXC 全家桶的前端项目。

步骤一：创建项目

mkdir oxc-project
cd oxc-project
npm init -y

步骤二：安装依赖

# 核心依赖
npm install @oxc/parser @oxc/transform @oxc/minifier @oxc/resolver oxlint oxfmt --save-dev

# TypeScript
npm install typescript --save-dev

# 开发服务器（可选）
npm install vite --save-dev

步骤三：创建项目结构

oxc-project/
├── src/
│   ├── components/
│   │   ├── Button.tsx
│   │   └── index.ts
│   ├── utils/
│   │   ├── date.ts
│   │   └── index.ts
│   ├── App.tsx
│   └── main.ts
├── dist/
├── oxlint.json
├── .oxfmtrc
├── tsconfig.json
└── package.json

步骤四：配置 Oxlint

创建 oxlint.json：

{
  "rules": {
    "no-unused-vars": "error",
    "no-console": "warn",
    "no-debugger": "error",
    "no-var": "error",
    "prefer-const": "warn",
    "eqeqeq": ["error", "always"]
  }
}

步骤五：配置 Oxfmt

创建 .oxfmtrc：

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always"
}

步骤六：配置 TypeScript

创建 tsconfig.json：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

步骤七：创建示例代码

src/components/Button.tsx：

import React from "react";

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: "primary" | "secondary";
}

export function Button({ children, onClick, variant = "primary" }: ButtonProps) {
  const baseStyles =
    "px-4 py-2 rounded font-medium transition-colors focus:outline-none focus:ring-2";

  const variantStyles = {
    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
    secondary:
      "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400",
  };

  return (
    <button className={`${baseStyles} ${variantStyles[variant]}`} onClick={onClick}>
      {children}
    </button>
  );
}

src/utils/date.ts：

/**
 * 格式化日期
 */
export function formatDate(date: Date, format = "YYYY-MM-DD"): string {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");

  return format.replace("YYYY", String(year)).replace("MM", month).replace("DD", day);
}

/**
 * 获取相对时间
 */
export function getRelativeTime(date: Date): string {
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  const seconds = Math.floor(diff / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);

  if (days > 0) return `${days} 天前`;
  if (hours > 0) return `${hours} 小时前`;
  if (minutes > 0) return `${minutes} 分钟前`;
  return "刚刚";
}

src/App.tsx：

import React from "react";
import { Button } from "@/components/Button";
import { formatDate } from "@/utils/date";

export function App() {
  const today = new Date();

  const handleClick = () => {
    console.log("Button clicked!");
  };

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <h1 className="text-3xl font-bold text-gray-900 mb-4">OXC Demo Project</h1>
      <p className="text-gray-600 mb-4">今天是：{formatDate(today)}</p>
      <div className="space-x-4">
        <Button onClick={handleClick}>Primary Button</Button>
        <Button variant="secondary">Secondary Button</Button>
      </div>
    </div>
  );
}

src/main.ts：

import React from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";

const container = document.getElementById("root");
if (container) {
  const root = createRoot(container);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

步骤八：配置 npm 脚本

更新 package.json：

{
  "name": "oxc-project",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "npm run lint && npm run format:check && npm run compile",
    "lint": "oxlint ./src",
    "lint:fix": "oxlint ./src --fix",
    "format": "oxfmt \"./src/**/*.{ts,tsx,js,jsx}\" --write",
    "format:check": "oxfmt \"./src/**/*.{ts,tsx,js,jsx}\" --check",
    "compile": "node scripts/build.js",
    "typecheck": "tsc --noEmit"
  },
  "devDependencies": {
    "@oxc/parser": "^0.15.0",
    "@oxc/transform": "^0.15.0",
    "@oxc/minifier": "^0.15.0",
    "@oxc/resolver": "^0.15.0",
    "oxlint": "^0.15.0",
    "oxfmt": "^0.15.0",
    "typescript": "^5.0.0",
    "vite": "^5.0.0"
  }
}

完整构建脚本

创建 scripts/build.js：

// scripts/build.js
import { transformSync } from "@oxc/transform";
import { minifySync } from "@oxc/minifier";
import { Resolver } from "@oxc/resolver";
import { parseSync } from "@oxc/parser";
import fs from "fs";
import path from "path";

const config = {
  srcDir: "./src",
  outDir: "./dist",
  extensions: [".ts", ".tsx", ".js", ".jsx"],
  target: "es2020",
};

// 创建解析器
const resolver = new Resolver({
  projectRoot: process.cwd(),
  alias: {
    "@": "./src",
  },
  extensions: config.extensions,
});

// 编译单个文件
function compileFile(inputPath, outputPath) {
  console.log(`📝 Compiling: ${path.relative(process.cwd(), inputPath)}`);

  const code = fs.readFileSync(inputPath, "utf-8");
  const lang = inputPath.endsWith(".tsx") ? "tsx" : inputPath.endsWith(".ts") ? "ts" : "js";

  // 1. 解析代码（可选，用于分析）
  // const ast = parseSync(code, { lang });

  // 2. 转换代码
  const transformed = transformSync(code, {
    lang,
    target: config.target,
    jsx: "automatic",
    jsxImportSource: "react",
    sourcemap: true,
  });

  // 3. 压缩代码（生产环境）
  const minified = minifySync(transformed.code, {
    compress: true,
    mangle: true,
    sourcemap: true,
  });

  // 确保输出目录存在
  const outFilePath = outputPath.replace(/\.tsx?$/, ".js");
  const outDir = path.dirname(outFilePath);
  if (!fs.existsSync(outDir)) {
    fs.mkdirSync(outDir, { recursive: true });
  }

  // 写入文件
  fs.writeFileSync(outFilePath, minified.code);
  if (minified.map) {
    fs.writeFileSync(`${outFilePath}.map`, minified.map);
  }

  const originalSize = Buffer.byteLength(code, "utf-8");
  const minifiedSize = Buffer.byteLength(minified.code, "utf-8");
  const reduction = ((1 - minifiedSize / originalSize) * 100).toFixed(1);

  console.log(`   ✅ ${path.basename(outFilePath)} (${reduction}% smaller)`);
}

// 遍历目录
function walkDir(dir, callback) {
  if (!fs.existsSync(dir)) return;

  const files = fs.readdirSync(dir);
  for (const file of files) {
    const filePath = path.join(dir, file);
    const stat = fs.statSync(filePath);

    if (stat.isDirectory()) {
      walkDir(filePath, callback);
    } else if (config.extensions.some((ext) => file.endsWith(ext))) {
      callback(filePath);
    }
  }
}

// 主构建流程
function build() {
  console.log("\n🚀 Starting OXC build...\n");
  console.log("━".repeat(50));

  const startTime = Date.now();

  // 清理输出目录
  if (fs.existsSync(config.outDir)) {
    fs.rmSync(config.outDir, { recursive: true });
  }
  fs.mkdirSync(config.outDir, { recursive: true });

  // 编译所有文件
  walkDir(config.srcDir, (inputPath) => {
    const relativePath = path.relative(config.srcDir, inputPath);
    const outputPath = path.join(config.outDir, relativePath);
    compileFile(inputPath, outputPath);
  });

  const endTime = Date.now();
  const duration = endTime - startTime;

  console.log("━".repeat(50));
  console.log(`\n✨ Build completed in ${duration}ms\n`);
}

// 运行构建
build();

性能提升展示

让我们对比传统工具链和 OXC 工具链的性能差异。

测试场景

• 项目规模：100 个 TypeScript 文件
• 总代码量：约 20,000 行
• 环境：MacBook Pro M1

传统工具链 vs OXC 工具链

任务	传统工具	耗时	OXC 工具	耗时	提升
代码检查	ESLint	25s	Oxlint	0.4s	62x
代码格式化	Prettier	2.8s	Oxfmt	0.15s	18x
TypeScript 编译	tsc	8s	OXC Transformer	0.6s	13x
代码压缩	Terser	3.5s	OXC Minifier	0.6s	5.8x
总耗时	-	39.3s	-	1.75s	22x

CI/CD 时间对比

流水线步骤	传统工具链	OXC 工具链
安装依赖	45s	45s
类型检查	8s	8s (tsc)
代码检查	25s	0.4s
构建	12s	1.5s
测试	20s	20s
总计	110s	75s

CI 时间减少 32%！

开发体验改善

场景	改善前	改善后
pre-commit 钩子	20-30s	1-2s
保存时检查	可感知延迟	即时完成
全项目格式化	需要等待	几乎瞬间
大型项目构建	数分钟	数秒

学习路线建议

根据你的需求，可以选择不同的学习路径：

入门路线：提升日常开发效率

Week 1: Oxlint
├── 替换项目中的 ESLint
├── 配置 VS Code 插件
└── 体验即时检查的快感

Week 2: Oxfmt
├── 替换项目中的 Prettier
├── 配置保存时格式化
└── 配合 lint-staged 使用

进阶路线：深入代码处理

Week 3-4: Parser + Transformer
├── 学习 AST 基础
├── 用 Parser 构建代码分析工具
├── 用 Transformer 处理 TypeScript
└── 尝试自定义代码转换

高级路线：构建工具开发

Week 5-6: Minifier + Resolver
├── 理解代码压缩原理
├── 学习模块解析机制
├── 尝试构建简单的打包器
└── 深入理解前端工具链

资源汇总

官方资源

• 📖 OXC 中文文档：https://oxc.zh.libdoc.top
• 🌟 GitHub 仓库：https://github.com/oxc-project/oxc
• 💬 Discord 社区：参与讨论，获取帮助

本系列文章

1. 初识 OXC：前端工具链的新选择
2. Oxlint 实战教程
3. Oxfmt 实战教程
4. Parser 入门教程
5. Transformer 入门教程
6. Minifier 实战教程
7. Resolver 入门教程
8. 本文：总结篇实战

相关工具

工具	说明
Vite	支持 OXC 的下一代构建工具
Rolldown	基于 Rust 的 Rollup 替代品
Rspack	基于 Rust 的 Webpack 替代品
Biome	另一个 Rust 前端工具链

总结

通过这八篇文章，我们全面学习了 OXC 工具链：

核心收获

知识点	说明
为什么选择 OXC	Rust 带来的极致性能
Oxlint	快 50 倍的代码检查
Oxfmt	快 20 倍的代码格式化
Parser	理解 AST，构建代码工具
Transformer	TypeScript 编译和 JSX 转换
Minifier	生产环境代码压缩
Resolver	模块路径解析
整合应用	搭建完整开发环境

一句话总结

OXC 正在用 Rust 的速度重塑前端工具链。

未来展望

OXC 还在快速发展中：

• 更多 ESLint 规则支持
• 更完整的语法降级
• 插件系统
• 更多打包工具集成

前端工具的未来，已经到来。

---

💡 最后一句话：

如果你通过这个系列爱上了 OXC，欢迎访问 OXC 中文文档 深入学习，也欢迎在 GitHub 上给项目点个 Star！

Happy coding! 🚀