前端工具链几乎都被 rust 重写了一遍，开个帖子对比一下。
Node 工具链 / 运行时对比
这一层管的是「怎么跑 TS、装依赖、跑 script」，不是生产打包。Nub 没有 bundler，生产产物仍交给后面的 Vite / Rolldown 等。
| 工具 | 定位 | 执行引擎 | 包管理 | 核心亮点 | 主要短板 | 适合 |
|---|
| Nub | Node 增强一体工具 | stock Node + oxc 转译 | 内置（兼容 pnpm/npm/bun lockfile） | 不换运行时；nub run / install / nubx / 管 Node 版本都快 | 较新，生态与心智模型还在普及 | 想留在 Node，又要 Bun 级 DX |
| Bun | 一体运行时 + 工具链 | JavaScriptCore | 内置 | 跑、装、测、打包一条龙，速度猛 | 自有 API / 兼容面与 Node 有差 | 新项目、能接受 Bun 生态 |
| Deno | 一体运行时 + 工具链 | V8 | 内置 / JSR 等 | 权限模型、开箱 TS、标准库 | 与 npm 生态摩擦小于从前但仍在 | 安全边界清晰、偏 Deno 栈 |
| Node + tsx / ts-node | 官方运行时 + 转译器 | Node | 靠 npm/pnpm/yarn | 兼容性最稳、生态最大 | 工具要自己拼（装依赖、版本、跑脚本） | 存量 Node 项目默认路径 |
| pnpm | 包管理器 | — | 内容寻址 + 硬链 | monorepo、省磁盘、锁文件成熟 | 只解决「装」；跑 TS / 管 Node 还要别的 | monorepo、团队统一装依赖 |
| npm / yarn | 包管理器 | — | 各家策略 | 默认 / 历史包袱小 | 速度与磁盘占用通常不如 pnpm | 简单项目、兼容优先 |
| fnm / nvm / volta | Node 版本管理 | — | — | 多版本切换 | 不管包管理和跑 TS | 本机多项目多 Node 版本 |
推荐
- 留在 Node、想一把梭工具链：Nub。
- 能换运行时、要极致一体体验：Bun（或 Deno）。
- 稳妥拼装：Node + pnpm + tsx（版本再用 fnm/volta）。
JS/TS 打包 / 构建工具对比
| 工具名称 | 类型 | 核心技术 | 打包速度 | 易用性 | 典型适用场景 | 主要短板 |
|---|
| Vite | 构建工具 | ESBuild（开发）+ Rolldown（生产） | 极快 | 极高 | 现代前端项目、快速开发 | 大型 monorepo 需额外优化 |
| Rspack | 打包工具 | Rust + Webpack 兼容 | 极快 | 高 | 大型项目、Webpack 迁移 | 配置较复杂 |
| Rsbuild | 构建工具 | 基于 Rspack 的零配置 | 极快 | 极高 | 中大型项目、追求零配置 | 生态相对较新 |
| Rolldown | 打包工具 | Rust 重写 Rollup | 极快 | 高 | 库打包、组件库发布 | 仍在快速发展 |
| Turbopack | 构建工具 | Rust 底层 + 增量编译 | 极快 | 高 | Next.js 全栈、大规模应用 | 主要绑定 Vercel 生态 |
| Farm | 打包工具 | Rust 多线程 | 极快 | 中高 | 大型 monorepo、高性能构建 | 社区较小 |
| Bun Bundler | 打包工具 | Bun 运行时内置 | 极快 | 高 | Bun 生态项目 | 生态仍在成长 |
| esbuild | 打包 / 转译 | Go | 极快 | 高 | 库打包、自定义流水线 | 功能比完整框架少 |
| webpack | 打包工具 | JS | 中 | 中 | 存量大项目、高度定制 | 配置与冷启动偏重 |
推荐
- 首选：Vite（开发体验与生态最佳）。
- 库打包：Rolldown / esbuild。
- Webpack 迁移：Rspack / Rsbuild。
CSS 方案对比
分两块：原子化 / 工具类，以及 CSS-in-JS。
原子化 / 工具类 / 预处理
| 方案 | 类型 | 核心亮点 | 主要短板 | 适合 |
|---|
| Tailwind CSS | Utility-first | 生态最大、设计系统好搭、JIT | 类名噪声、深定制要熟练 | 绝大多数新项目默认 |
| UnoCSS | 按需原子引擎 | 极快、可兼容 Tailwind 预设、灵活 | 生态与现成组件不如 Tailwind | 要速度 / 自定义规则 |
| Lightning CSS | CSS 转换器（Rust） | 压缩、兼容、嵌套处理快 | 不是完整「写样式」方案 | 构建流水线里替换 PostCSS 部分能力 |
| PostCSS + Sass/Less | 预处理 / 插件链 | 存量项目多、插件丰富 | 链路偏老、和原子化叠加易乱 | 维护老项目、设计稿转 CSS |
CSS-in-JS
| 方案名称 | 核心技术 | 运行时/编译时 | 性能 | 易用性 | 典型适用场景 | 主要短板 |
|---|
| StyleX | 编译时原子化 + 静态提取 | 编译时为主 | 极高 | 中高 | 大型应用、设计系统 | 学习曲线 |
| Panda CSS | 编译时 Atomic | 编译时 | 极高 | 高 | 中大型项目 | 配置稍复杂 |
| Vanilla Extract | 类型安全 CSS-in-JS + 编译时 | 编译时 | 高 | 高 | TypeScript 重度项目 | 需构建步骤 |
| Emotion | CSS-in-JS + 编译优化 | 混合 | 中高 | 极高 | 需要动态样式的组件 | 运行时开销稍高 |
| Styled Components | 标签模板 + 编译优化 | 混合 | 中 | 高 | 组件化样式、React 组件库 | 运行时性能不如纯编译时 |
推荐
- 默认样式：Tailwind；要极致按需 / 自定义：UnoCSS。
- CSS-in-JS 性能优先：StyleX 或 Panda CSS；TypeScript 友好：Vanilla Extract。
| 工具 | 定位 | 核心技术 | 核心亮点 | 主要短板 | 适合 |
|---|
| ESLint | Lint | JS | 规则与插件生态最大 | 配置重、大仓可偏慢 | 存量项目、要细规则 |
| Oxlint | Lint | Rust（Oxc） | 极快、和 ESLint 规则部分兼容 | 规则覆盖仍少于 ESLint | 大仓加速、CI 卡点 |
| Biome | Lint + Format | Rust | 一把梭、配置简单、速度快 | 插件生态不如 ESLint | 新项目想少装几个工具 |
| Prettier | Format | JS | 事实标准、争论少 | 只格式化、不 Lint | 团队统一格式 |
| dprint | Format | Rust | 多语言、快 | 前端生态心智不如 Prettier | monorepo 多语言格式化 |
推荐
- 新项目省事：Biome（或 Biome Format + Oxlint）。
- 要最大插件生态：ESLint + Prettier；大仓再加 Oxlint 提速。
测试对比
| 工具 | 定位 | 核心亮点 | 主要短板 | 适合 |
|---|
| Vitest | 单测 / 组件测 | 与 Vite 同构、快、TS 友好 | 重度 Jest 插件偶有摩擦 | Vite 项目默认 |
| Jest | 单测 | 生态老、文档多 | 配置与 ESM/TS 体验偏旧 | 存量 Jest 仓 |
| Playwright | E2E / 组件 | 多浏览器、Trace、稳定 | 比单元测重 | E2E、跨浏览器 |
| Bun test | 单测 | 内置、启动快 | 绑 Bun 生态 | Bun 项目 |
| node:test | 单测 | 零依赖、官方 | API / 生态较素 | 轻量库、少依赖 |
推荐
- Vite 栈单测：Vitest；E2E：Playwright。
- Bun 栈：Bun test；极简 Node 库：node:test。