TanStack Start 框架正式支持 Rsbuild

本文翻译自 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 的现有代码库中使用它。

使用指南:tanstack.com/start/lates...

相关推荐
传奇开心果编程1 小时前
【xilem0.4基础语法学与练】第48课 lists组件官方示例代码深度解析
学习·rust·前端框架
郑州光合科技余经理1 小时前
本地生活系统:多业务订单字段怎么分账本导出
java·开发语言·前端·数据库·uni-app·php·ai编程
怕浪猫8 小时前
FDE 如何正确解决现场项目工程性的问题
前端·后端·ai编程
西瓜太郎12348 小时前
外层模型卡片与分组详情成功率不一致,应该怎么排查?
前端·typescript·go·软件工程·react
GreenTea9 小时前
vLLM 与 SGLang KV Cache 底层实现机制深度调研报告
前端·后端·算法
几何心凉12 小时前
没有万能模型:我用 AiiOnly Token Plan,把多款大模型的长处拼进同一个项目
前端
kyriewen12 小时前
Claude Code 的额度今天缩水了17%——官方公告上写的是"永久提高25%"
前端·ai编程·claude
雪芽蓝域zzs12 小时前
vue解构平铺VS对象包裹
前端·javascript·vue.js
风骏时光牛马13 小时前
从零到实战,完整AI学习路线
前端
三十而立洋14 小时前
深入理解 Monorepo:子包安装依赖
前端·前端工程化