介绍

一个简洁高效的 Farm/Vite 插件，用于动态生成路由文件，帮助开发者轻松实现约定式路由功能。

特性

• 📂 Vite Plugin：兼容 Vite
• 📦 自动生成：根据文件目录结构自动生成路由文件
• 🛠️ 路由元信息：支持通过 *.meta.json 文件为每个路由配置附加信息
• 🤝 动态路由：约定以$开头的文件为动态路由文件，例如 $id.tsx
• ⚙️ 多页面入口：支持配置多个页面入口，默认以页面入口下的 Layout.(jsx|tsx) 作为局部路由，优先级高于全局路由；例如 src/pages/Layout.tsx
• 📝 全局 Layout 支持：默认使用 src/layouts/index.(jsx|tsx) 文件作为全局路由文件

安装

npm install farm-plugin-auto-routes --save-dev
or
yarn add farm-plugin-auto-routes --dev
or
pnpm add farm-plugin-auto-routes --save-dev

使用方法

配置

在 farm.config.ts 或 vite.config.ts 中配置

import farmPluginAutoRoutes from 'farm-plugin-auto-routes';

export default defineConfig({
  // ...其他配置项
  plugins: [
    farmPluginAutoRoutes({
      // 配置项
      dirs: 'src/pages',
      writeToDisk: false,
    }),
  ],
});

使用

import { getRoutes } from 'virtual:routes';

引入 virtual:routes 会导出 getRoutes 方法，返回一个对象，包含 routes 和 routeComponents

export const getRoutes: () => {
  routes: Record<
    string,
    {
      id: string;
      path: string;
      parentId: string;
      isLayout?: boolean;
      [key: string]: any;
    }
  >;
  routeComponents: Record<string, React.ComponentType<any>>;
};

配置项

dirs

• 类型: string | (string | dirOptions)[]
• 默认值: 'src/pages'

interface dirOptions {
  /**
   * 页面入口
   * @default 'src/pages'
   */
  dir: string;
  /**
   * 基本路径
   * @default '/'
   */
  basePath?: string;
  /**
   * 过滤规则
   * @example /\.(jsx?|tsx)$/
   */
  pattern: RegExp;
}

传入多个目录时，会递归遍历每个目录下的文件，生成对应的路由配置，并将基本路径加入生成的路由。

还可以使用 pattern 过滤文件，例如只生成以 .tsx 结尾的文件。

writeToDisk

• 类型: boolean
• 默认值: false

是否将生成的路由配置写入磁盘，默认不写入磁盘，只生成在内存中，方便调试。

默认写入位置为 **/node_modules/(farmfe_plugin_virtual_routes|vite_plugin_virtual_routes).tsx。

路由元数据

允许用户使用.meta.json 文件为每个路由配置附加信息，meta 文件必须放在与路由文件同级目录下，文件名必须以.meta.json 结尾。

你可以在 meta 中配置的属性有：

• id: 路由 id，默认生成，例如 src/pages/about 会生成 about 作为 id，此 id 会在 routeComponents 中对应一个组件
• path: 路由路径，默认生成，例如 src/pages/about 会生成 /about 作为 path
• parentId: 父级路由 id，如果存在页面局部路由或全局路由，会自动生成 parentId 为局部路由 id 或全局路由 id
• requireLayout: 是否需要局部路由或全局路由，默认为 true，如果为 false，则不会生成 parentId
• 其他自定义属性

示例

文件结构

src
├── manage
│   ├── index.tsx
├── pages
│   ├── index.tsx
│   ├── about.tsx
│   ├── about.meta.json
│   ├── user
│   │   ├── index.tsx
│   │   ├── $id.tsx
│   │   └── $id.meta.json
│   └── Layout.tsx
├── layouts
│   └── index.tsx

插件采用的虚拟模块，并未生成文件写入磁盘，如果你想查看生成的文件，请设置 writeToDisk 为 true，插件会自动生成文件到 node_modules 下。

生成的路由配置

// @ts-nocheck
// this file is generated by farm-plugin-auto-routes
// do not change anytime!
import React, { Suspense } from 'react';

function withLazyLoad(LazyComponent) {
  const lazyComponentWrapper = (props) => (
    <Suspense fallback={props.loadingComponent}>
      <LazyComponent {...props} />
    </Suspense>
  );
  return lazyComponentWrapper;
}

export function getRoutes() {
  const routes = {
    '@@pages-layout': { id: '@@pages-layout', path: '/layout', isLayout: true },
    'pages-about': {
      id: 'pages-about',
      path: '/about',
      parentId: '@@pages-layout',
    },
    index: { id: 'index', path: '/', parentId: '@@pages-layout' },
    'user-$id': {
      id: 'user-$id',
      path: '/user/:id',
      name: 'userId',
      parentId: '@@pages-layout',
    },
    user: { id: 'user', path: '/user', parentId: '@@pages-layout' },
    manage: { id: 'manage', path: '/manage', parentId: '@@global-layout' },
    '@@global-layout': { id: '@@global-layout', path: '/', isLayout: true },
  };
  return {
    routes,
    routeComponents: {
      '@@pages-layout': withLazyLoad(
        React.lazy(() => import('./src/pages/Layout.tsx'))
      ),
      'pages-about': withLazyLoad(
        React.lazy(() => import('./src/pages/about.tsx'))
      ),
      index: withLazyLoad(React.lazy(() => import('./src/pages/index.tsx'))),
      'user-$id': withLazyLoad(
        React.lazy(() => import('./src/pages/user/$id.tsx'))
      ),
      user: withLazyLoad(
        React.lazy(() => import('./src/pages/user/index.tsx'))
      ),
      manage: withLazyLoad(React.lazy(() => import('./src/manage/index.tsx'))),
      '@@global-layout': withLazyLoad(
        React.lazy(() => import('./src/layouts/index.tsx'))
      ),
    },
  };
}