@feoe/fs-router 为不同的构建工具提供了插件支持。
1import { FileBasedRouterVite } from '@feoe/fs-router/vite'
2
3export interface PluginConfig {
4 /** 路由文件目录 */
5 routesDirectory: string
6 /** 生成的路由文件路径 */
7 generatedRoutesPath: string
8 /** 路由文件扩展名 */
9 routeExtensions?: string[]
10 /** 是否启用路由生成 */
11 enableGeneration?: boolean
12 /** 路径别名配置 */
13 alias?: {
14 name: string
15 basename: string
16 }
17 /** 是否启用代码分割 */
18 splitting?: boolean
19 /** 是否启用默认错误边界 */
20 defaultErrorBoundary?: boolean
21 /** 类型生成选项 */
22 typeGenerateOptions?: TypeGenerateOptions
23}
1// vite.config.ts
2export default defineConfig({
3 plugins: [
4 FileBasedRouterVite({
5 routesDirectory: 'src/routes',
6 generatedRoutesPath: 'src/routes.tsx',
7 enableGeneration: true,
8 typeGenerateOptions: {
9 routesTypeFile: 'src/routes-type.ts'
10 }
11 })
12 ]
13})
1const { FileBasedRouterRspack } = require('@feoe/fs-router/rspack')
2
3// 使用相同的 PluginConfig 接口
4export type RspackPluginOptions = PluginConfig
1const { FileBasedRouterWebpack } = require('@feoe/fs-router/webpack')
2
3// 使用相同的 PluginConfig 接口
4export type WebpackPluginOptions = PluginConfig
1interface TypeGenerateOptions {
2 /** 类型文件输出路径 */
3 routesTypeFile: string
4 /** 是否生成路由参数类型 */
5 generateRouteParams?: boolean
6 /** 是否生成 Loader 类型 */
7 generateLoaderTypes?: boolean
8 /** 路由目录配置(仅 Rspack) */
9 routesDirectories?: RouteDirectory[]
10}
11
12interface RouteDirectory {
13 /** 路由前缀 */
14 prefix?: string
15 /** 路由目录路径 */
16 path: string
17}