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 小时前
AI 时代:智商决定起点,情商决定走多远
前端·ai编程
kyriewen1 小时前
用了半年 Claude Code 后,我尝试关掉它写了一周代码——结果比想象中严重
前端·javascript·ai编程
IT_陈寒2 小时前
Vite的静态资源打包让我熬夜到三点,这坑千万别跳
前端·人工智能·后端
山河木马3 小时前
矩阵专题0-webGL中的矩阵
javascript·webgl·计算机图形学
徐小夕3 小时前
万字拆解 JitWord:企业级实时协同文档底层架构 + 大模型 AI 融合完整实践
前端·vue.js·github
一份执念3 小时前
uni-app 小程序分包限制处理与主包体积优化实战
前端·微信小程序
Asize3 小时前
多模态生图:从 Vite 工程化到前端调用 Qwen Image
javascript·人工智能·后端
MariaH3 小时前
初识MySQL
前端
陳陈陳3 小时前
从Token到Embedding:一篇文章搞懂大模型的「文字数学变形记」
前端·javascript·ai编程
十有八七3 小时前
AI时代的置身X内
前端·人工智能