umi插件开发仿dumi项目实现基础路由解析

mkdir /docs

// /docs/index.tsx
import React from 'react'
const Home = () => {
    return (<div>hello domi</div>)
}
export default Home

// /docs/button/index.tsx
import react from 'react'
const Button = () => {
    return <button>Button</button>
}
export default Button

# 创建插件目录
mkdir /src/features
# /docs目录路由解析插件
touch /src/features/routes.ts

import { defineConfig } from "umi";
export default defineConfig({
    plugins: [
        './src/features/routes.ts',
    ],
});

{
  index: {
    path: '/',
    id: 'index',
    parentId: '@@/global-layout',
    file: 'index.tsx',
    absPath: '/'
  },
  docs: {
    path: 'docs',
    id: 'docs',
    parentId: '@@/global-layout',
    file: 'docs.tsx',
    absPath: '/docs'
  },
  '@@/global-layout': {
    id: '@@/global-layout',
    path: '/',
    file: 'D:/project/domi/src/layouts/index.tsx',
    parentId: undefined,
    absPath: '/',
    isLayout: true
  }
}

// /src/features/routes.ts
import path from 'path';
import type { IApi } from 'umi';
import type { IRoute } from '@umijs/core/dist/types';
import { getConventionRoutes } from '@umijs/core';
export default (api: IApi) => {
  api.describe({ key: 'domi:routes' });
  api.modifyRoutes((oRoutes: Record<string, IRoute>) => {
    const routes: Record<string, IRoute> = {}
    const docDir = 'docs'
    // 获取某个目录下所有可以配置成umi约定路由的文件
    const dirRoutes: Record<string, IRoute> = getConventionRoutes({
      base: path.join(api.cwd, docDir),
    });
    Object.entries(dirRoutes).forEach(([key, route]) => {
      // 这里将文件的路径改为绝对路径，否则umi会默认找/src/pages下组件
      route.file = path.resolve(docDir, route.file);
      routes[route.id] = route;
    });
    return routes;
  });
};

{   
  'button/index': {
    path: 'button',
    id: 'button/index',      
    parentId: undefined,     
    file: 'button/index.tsx',
    absPath: '/button'       
  },
  index: {
    path: '/',
    id: 'index',
    parentId: undefined,     
    file: 'index.tsx',       
    absPath: '/'
  }
}