本文翻译自 TanStack 官方博客,作者:Manuel Schiller
TanStack Start 现在不仅支持 Vite,也正式支持 Rsbuild v2。这意味着用户在使用 TanStack Start 时,可以在两套官方支持的构建工具方案之间选择。
不同团队有不同的偏好:有些团队更喜欢 Vite;也有一些团队更偏向 Rsbuild,因为它基于 Rspack 构建,对有 webpack 经验的团队来说更熟悉,也更容易融入现有的前端基础设施。TanStack Start 新的适配器让这个选择更清晰:可以通过插件系统接入这两种构建工具。
这个适配器由我们与 Rspack 团队共同完成。在开发过程中,其中一些工作也推动了 Rspack 和 Rsbuild 本身的改进。
对于 React 应用,配置如下:
ts
// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
export default defineConfig({
plugins: [pluginReact(), tanstackStart()],
})
目前 React 和 Solid 均已得到支持。由于 Rsbuild 相关实现位于 TanStack Start 的共享构建层,未来新增的框架适配器也可以复用同样的接入方式。
Rsbuild 负责构建流程,框架插件则负责处理 React 或 Solid,而 tanstackStart() 会把 Start 接入客户端和服务端构建。如果你之前用过 Vite 版的 Start,这套模式应该会很熟悉,因为 Start 的构建工具插件本来就是为了自然融入你选择的工具链而设计的。
为使用 Rsbuild 的团队提供 Start 接入路径
有些团队希望将 Start 和 Rsbuild 一起使用,是因为他们希望底层使用 Rspack、采用接近 webpack 的开发模型,或者需要一套更贴合现有技术栈的构建工具。
这对已有应用的迁移同样重要。团队迁移到 Start 时,可以尽可能保留原有构建配置,而不必同时更换框架和构建工具。现在已经有一家大型公司在使用这个适配器,将多个应用从 webpack 构建迁移到基于 Rsbuild 的 Start。
这条接入路径包含完整的 Start 功能,包括 React 和 Solid 应用、Server Functions、SSR 和流式 SSR、HMR、导入保护,以及 React 应用中的 React Server Components。
双适配器规则
在 TanStack,我们反复看到一种模式:第一个适配器证明方案可行,而第二个适配器会让我们看清哪些部分真正属于核心能力。
TanStack Router 和 TanStack Start 已经在 UI 框架层经历过一次这样的过程。加入 Solid 之后,React 相关的隐含假设变得更容易被发现,也让共享核心得到了改进。加入 Rsbuild 则让构建层的边界同样变得更加清晰。
由于 Start 的第一个构建适配器是 Vite,一些构建逻辑很自然地围绕 Vite 的插件生命周期展开。而 Rsbuild 的加入让边界更加清楚:共享的 Start 构建行为放在同一个地方,构建工具特有的逻辑则分别放在 Vite 和 Rsbuild 适配器中。
选择你自己的构建工具
选择 Start 不应该意味着团队必须放弃自己偏好的构建工具。现在 Vite 和 Rsbuild 都已受支持,团队可以继续使用最适合自己技术栈的工具链,同时构建同类 Start 应用。
对于偏好 Rsbuild,或者已经在 webpack 与 Rspack 生态中工作的团队来说,现在可以通过 Rsbuild 的插件系统获得原生的 Start 集成。
Rsbuild 适配器现在已可用。你可以在新的 Rsbuild 项目中尝试它,也可以在正在迁移到 TanStack Start 的现有代码库中使用它。
