SuperAPI AI 工具集

router-plugin

通用与其它

查看项目

更新于 10-15 22:10

技能介绍

用途:@tanstack/router-plugin 是 TanStack Router 的打包器插件,负责文件式路由生成与自动代码分割,通过 unplugin 支持 Vite、Webpack、Rspack 和 esbuild。

主要能力:组合插件最多包含三个子插件——路由生成器(始终启用,监听路由文件并生成 routeTree.gen.ts)、代码分割器(autoCodeSplitting 为 true 时启用,借助虚拟模块把路由文件拆成懒加载 chunk)、HMR(开发模式且代码分割关闭时,热更新路由变更而无需整页刷新)。

使用方式:安装 npm install -D @tanstack/router-plugin。Vite 中从 @tanstack/router-plugin/vite 导入 tanstackRouter,Webpack 用 /webpack,Rspack 用 /rspack,esbuild 用 /esbuild。关键:在 Vite 配置中路由插件必须放在框架插件(React、Solid、Vue)之前,否则路由生成与代码分割会静默失败。非 React 框架必须显式设置 target('react' | 'solid' | 'vue',默认 'react')。常用配置包括 routesDirectory(默认 './src/routes')、generatedRouteTree(默认 './src/routeTree.gen.ts')、autoCodeSplitting、enableRouteGeneration,以及文件约定选项 routeFilePrefix、routeFileIgnorePrefix(默认 '-')、indexToken、routeToken 等;代码分割可用 codeSplittingOptions 的 defaultBehavior 与 splitBehavior 按路由定制;输出选项含 quoteStyle、semicolons、disableTypes、disableLogging、addExtensions、enableRouteTreeFormatting;还支持 virtualRouteConfig 虚拟路由配置。

适用场景:使用 TanStack Router 文件式路由的前端项目,需要自动生成路由树并按路由拆分代码时。

限制与注意:不要手动编辑 routeTree.gen.ts,改动会被覆盖;启用 autoCodeSplitting 后无需手写 createLazyRoute 或 lazyRouteComponent;移动、重命名、增删路由文件后应让插件重新生成或运行 pnpm exec tsr generate,检查生成差异,更新引用旧路由的链接、重定向、参数、预加载与测试,并运行路由生成测试、类型测试和生产构建;routeTree.gen.ts 应提交到版本库。资料未提供收费、价格与平台信息。