Rspack/Rsbuild 项目如何配置 TanStack Router 插件生成路由树

Rspack/Rsbuild 项目如何配置 TanStack Router 插件生成路由树【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router如果你在一个使用 Rspack 或 Rsbuild 打包的项目里想用 TanStack Router 的文件式路由file-based routing需要安装tanstack/router-plugin插件并把它挂进 Rsbuild 配置。插件会在构建和开发过程中自动扫描路由目录、生成路由树文件routeTree.gen.ts之后你只需按文件组织路由组件即可。本文以 React 项目为主线给出最短可跑通的路径Solid 项目在文中单独标注。安装插件在项目中安装tanstack/router-plugin文档中的安装说明以包管理器标签形式给出React 与 Solid 使用同一个包名官方示例项目将其放在 devDependencies 中版本为^1.168.37# 以 pnpm 为例官方示例项目即使用 pnpm pnpm add -D tanstack/router-plugin路由运行时依赖按框架选择例如 React 项目需要tanstack/react-router示例项目使用^1.170.35。示例项目的 package.json 可以参照。在 rsbuild.config.ts 中注册插件编辑项目根目录的rsbuild.config.ts从tanstack/router-plugin/rspack导入tanstackRouter并放进tools.rspack.pluginsimport { defineConfig } from rsbuild/core import { pluginReact } from rsbuild/plugin-react import { tanstackRouter } from tanstack/router-plugin/rspack export default defineConfig({ plugins: [pluginReact()], tools: { rspack: { plugins: [ tanstackRouter({ target: react, autoCodeSplitting: true, }), ], }, }, })与 官方示例项目的配置 一致。其中target指定框架reactautoCodeSplitting开启自动代码分割。Solid 项目是可选分支配置区别在框架插件和targetimport { defineConfig } from rsbuild/core import { pluginBabel } from rsbuild/plugin-babel import { pluginSolid } from rsbuild/plugin-solid import { tanstackRouter } from tanstack/router-plugin/rspack export default defineConfig({ plugins: [ pluginBabel({ include: /\.(?:jsx|tsx)$/, }), pluginSolid(), ], tools: { rspack: { plugins: [tanstackRouter({ target: solid, autoCodeSplitting: true })], }, }, })建立路由文件与入口路由文件放在插件默认扫描的目录./src/routes下。以示例项目为例结构是src/ ├── routes/ │ ├── __root.tsx # 根布局路由 │ ├── index.tsx # 索引路由对应 / │ └── about.tsx # 普通路由对应 /about ├── app.tsx └── routeTree.gen.ts # 插件自动生成不要手动修改入口组件从生成的文件导入routeTree并创建路由实例示例 app.tsx 的内容import * as React from react import { RouterProvider, createRouter } from tanstack/react-router import { routeTree } from ./routeTree.gen import ./styles.css const router createRouter({ routeTree, defaultPreload: intent, scrollRestoration: true, }) declare module tanstack/react-router { interface Register { router: typeof router } } const App () { return RouterProvider router{router} / } export default App路由文件本身用createFileRoute定义例如src/routes/index.tsximport { createFileRoute } from tanstack/react-router import * as React from react export const Route createFileRoute(/)({ component: HomeComponent, }) function HomeComponent() { return ( div classNamep-2 h3Welcome Home!/h3 /div ) }文件命名规则routeToken默认为routeindexToken默认为index因此posts.tsx、posts.route.tsx、posts/route.tsx对应同一个运行时路径/posts以-开头的文件和目录如-components默认会被忽略可用来存放非路由的伴生文件。完整命名与配置语义见 File-based Routing API Reference。运行并验证路由树已生成启动开发服务器示例项目的dev脚本为rsbuild dev --port 3000pnpm dev插件在构建流程中生成路由树文件默认路径为./src/routeTree.gen.ts。文件头部会标明它是自动生成的、不应手动修改。示例项目的 routeTree.gen.ts 文档示例内容节选如下可以看到两条路由被登记进FileRoutesByFullPath// This file was automatically generated by TanStack Router. // You should NOT make any changes in this file as it will be overwritten. // 以下为文档示例节选 import { Route as rootRouteImport } from ./routes/__root import { Route as IndexRouteImport } from ./routes/index import { Route as AboutRouteImport } from ./routes/about export interface FileRoutesByFullPath { /: typeof IndexRoute /about: typeof AboutRoute }验证方式新增一个路由文件例如src/routes/about.tsx后重新触发构建检查routeTree.gen.ts中是否出现对应的id/path条目——这是判断插件生效的直接依据。打开浏览器访问http://localhost:3000和http://localhost:3000/about确认两个路由都能渲染。生产构建时示例项目使用rsbuild build tsc --noEmit类型检查通过也说明生成文件与路由文件的类型是自洽的。让 linter 与编辑器忽略生成文件routeTree.gen.ts由 TanStack Router 管理不应被 linter/formatter 改动。建议按官方文档 with-rspack 的处理方式在.prettierignore、ESLint 忽略规则或 Biome 的files.ignore中排除该文件。使用 VSCode 时重命名路由后可能出现路由树文件带着错误被意外打开。建议在项目根目录创建.vscode/settings.json把该文件标记为只读、并排除出文件监视与搜索结果{ files.readonlyInclude: { **/routeTree.gen.ts: true }, files.watcherExclude: { **/routeTree.gen.ts: true }, search.exclude: { **/routeTree.gen.ts: true } }默认配置与常用选项插件带有一组默认值多数项目无需任何额外配置{ routesDirectory: ./src/routes, generatedRouteTree: ./src/routeTree.gen.ts, routeFileIgnorePrefix: -, quoteStyle: single }需要自定义时直接修改传给tanstackRouter的配置对象即可。两个值得注意的选项routesDirectory/generatedRouteTree路由目录与路由树文件路径均相对于当前工作目录不能设为空字符串或undefined。autoCodeSplitting默认false官方说明 TanStack Router v2 会将它默认改为true本文示例显式开启了对应能力。不要将routeFilePrefix、routeFileIgnorePrefix或routeFileIgnorePattern配置成会匹配到路由命名约定中所用 token 的值文档明确警告这会导致意外行为。全部可配置项见 File-based Routing API Reference。进一步参考配置文档Installation with Rspack可运行的完整示例Reactexamples/react/quickstart-rspack-file-basedSolid 示例examples/solid/quickstart-rspack-file-based【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考