插件 API

@feoe/fs-router 为不同的构建工具提供了插件支持。

Vite 插件

FileBasedRouterVite

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})

Rspack 插件

FileBasedRouterRspack

1const { FileBasedRouterRspack } = require('@feoe/fs-router/rspack')
2
3// 使用相同的 PluginConfig 接口
4export type RspackPluginOptions = PluginConfig

Webpack 插件

FileBasedRouterWebpack

1const { FileBasedRouterWebpack } = require('@feoe/fs-router/webpack')
2
3// 使用相同的 PluginConfig 接口
4export type WebpackPluginOptions = PluginConfig

通用配置选项

TypeGenerateOptions

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}