SuperAPI AI 工具集

tanstack-router-plugin

编程与开发

查看项目

更新于 10-16 00:02

技能介绍

用途:该插件为 TanStack Router 提供文件式路由与自动代码分割能力,通过 unplugin 适配 Vite、Webpack、Rspack、esbuild 等打包器。

主要能力:由子插件组成,包括始终启用的路由生成器(监听路由文件并生成 routeTree.gen.ts)、开启 autoCodeSplitting 时的代码分割器(用虚拟模块把路由文件拆成懒加载块),以及代码分割关闭时开发模式下的 HMR。可配置 routesDirectory、generatedRouteTree、target(react/solid/vue)等核心选项,以及文件命名约定、代码分割分组(defaultBehavior、splitBehavior)、生成代码风格(quoteStyle、semicolons)、虚拟路由配置等。

使用方式:安装 npm install -D @tanstack/router-plugin。在 Vite 中导入 tanstackRouter 并在框架插件之前调用;Webpack、Rspack 从对应子路径 require;esbuild 同理导入使用。示例配置中需传入 target 与 autoCodeSplitting。项目使用 CLI 时可用 pnpm exec tsr generate 重新生成。

关键约束与易错点:Vite 配置中路由插件必须排在框架插件之前,顺序错误会导致静默失败;非 React 框架必须显式设置 target;开启自动代码分割后不要手写 createLazyRoute 或 lazyRouteComponent;不要手工编辑生成的 routeTree.gen.ts。

限制:资料未提供收费、价格、性能表现等信息。