實(shí)現(xiàn)過(guò)程

umi默認(rèn)約定在/src/pages添加的(j|t)sx?文件會(huì)自動(dòng)加載為路由。同樣我們希望實(shí)現(xiàn)在某個(gè)目錄下添加的markdown文件自動(dòng)加載成為路由直接訪問(wèn)，本章我們首先來(lái)實(shí)現(xiàn)路由自動(dòng)解析及頁(yè)面展示的功能。

• 約定/docs目錄為markdown解析目錄
• 添加路由解析插件，
• 解析/docs目錄下文件為路由
• 通過(guò)自動(dòng)解析的路由訪問(wèn)頁(yè)面

本節(jié)完整代碼可參考 domi/feature/routes

添加路由加載插件

我們約定在項(xiàng)目根目錄下/docs目錄為markdown自動(dòng)加載目錄，先創(chuàng)建這個(gè)目錄

mkdir /docs

在剛創(chuàng)建的/docs目錄下添加兩個(gè)組件，用于驗(yàn)證解析效果

// /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

接下來(lái)創(chuàng)建路由解析插件，插件我們統(tǒng)一放在/src/features目錄下

# 創(chuàng)建插件目錄
mkdir /src/features
# /docs目錄路由解析插件
touch /src/features/routes.ts

接下來(lái)將插件注冊(cè)到配置.umirc.ts中

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

modifyRoutes

umi提供了modifyRouteshook，通過(guò)這個(gè)鉤子我們可以自由修改umi的路由，文檔可參考插件 API | UmiJS。

該函數(shù)入?yún)閡mi當(dāng)前收集到的路由集合，返回值于入?yún)⒁恢?，我們可以通過(guò)改變返回值來(lái)修改umi的路由。

通過(guò)打印入?yún)?，我們可以看到初始化?xiàng)目默認(rèn)的路由為以下結(jié)構(gòu)：

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

這里有幾個(gè)關(guān)鍵的屬性：

• isLayout屬性表示該對(duì)象是否為布局，umi的路由對(duì)象有兩種形式，一種為頁(yè)面，另一種為布局，通過(guò)該屬性值區(qū)分。
• parentId則標(biāo)注該頁(yè)面使用到了哪個(gè)布局。
• path表示頁(yè)面的訪問(wèn)路徑
• file表示該對(duì)象的組件文件路徑，相對(duì)路徑默認(rèn)會(huì)在/src/pages中找

由于我們要自己來(lái)生成markdown專屬路由，用不到umi默認(rèn)提供的約定路由特性，所以我們不會(huì)在/src/pages中寫頁(yè)面代碼，這個(gè)目錄我們可以刪掉。

解析生成路由

我們需要在modifyRoutes鉤子函數(shù)中，根據(jù)/docs目錄下的文件來(lái)創(chuàng)建對(duì)應(yīng)的路由，代碼如下所示

// /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'
    // 獲取某個(gè)目錄下所有可以配置成umi約定路由的文件
    const dirRoutes: Record<string, IRoute> = getConventionRoutes({
      base: path.join(api.cwd, docDir),
    });
    Object.entries(dirRoutes).forEach(([key, route]) => {
      // 這里將文件的路徑改為絕對(duì)路徑，否則umi會(huì)默認(rèn)找/src/pages下組件
      route.file = path.resolve(docDir, route.file);
      routes[route.id] = route;
    });
    return routes;
  });
};

注意：如果用pnpm來(lái)安裝依賴，上面代碼的imoprt可能找不到依賴，需要在.npmrc中添加一行node-linker=hoisted，并從新pnpm install，將依賴扁平化處理。

getConventionRoutes

這里用到了一個(gè)umi內(nèi)置的函數(shù)getConventionRoutes，該函數(shù)可以將某個(gè)目錄下符合umi定義的約定路由的文件，轉(zhuǎn)換成為路由對(duì)象

前面我們已經(jīng)在/docs下創(chuàng)建了兩個(gè)測(cè)試文件，將其打印出來(lái)dirRoutes變量為：

{   
  '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: '/'
  }
}

從打印結(jié)果可以看到，getConventionRoutes函數(shù)已經(jīng)幫我們將/docs目錄下的文件解析出來(lái)。我們只需要處理以下文件路徑，即可使用。

訪問(wèn)運(yùn)行

運(yùn)行項(xiàng)目可以看到我們能正常訪問(wèn)到/和/button下的兩個(gè)頁(yè)面，到這里我們就成功實(shí)現(xiàn)了路由加載。到這一步我們其實(shí)和umi提供的約定式路由功能差不多，只不過(guò)umi是在/src/pages下寫頁(yè)面，我們這里是在/docs下寫頁(yè)面。

現(xiàn)在切換頁(yè)面需要我們手動(dòng)輸入地址比較麻煩，下一節(jié)我們來(lái)實(shí)現(xiàn)一個(gè)全局Layout布局組件，將導(dǎo)航放在這個(gè)組件中。

以上就是umi插件開(kāi)發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)基礎(chǔ)路由解析的詳細(xì)內(nèi)容，更多關(guān)于umi插件仿dumi路由解析的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論