从 0 到 1 搭建基于 antd 的 monorepo 库，使用 dumi 展示文档（五）

在前四章中，我们完成了monorepo架构搭建、antd组件集成和dumi基础配置。本章将聚焦于文档系统深度优化与项目协作流程，通过定制化主题、多包联调和自动化部署三大核心环节，带您打造企业级组件库开发环境。

在.dumirc.ts中扩展themeConfig对象：

themeConfig: {
  nav: [
    { title: '组件', path: '/components' },
    { title: 'GitHub', path: 'https://github.com/your-repo' }
  ],
  footer: 'MIT Licensed | Copyright © 2025-present'
}

关键配置项：

导航栏路由映射
自定义页脚声明
全局样式覆写

通过iframe模式实现隔离沙箱环境：

// 启用iframe渲染
export default {
  // ...
  resolve: {
    atomDirs: [{ type: 'component', dir: 'src' }]
  },
  // 开启iframe模式
  iframe: true
}

使用lerna graph生成依赖关系图：

lerna ls --graph
├─ @project/components
│  └─ @project/utils
└─ @project/docs
   └─ @project/components

配置nodemon监听脚本：

{
  "watch": "lerna run --parallel watch",
  "dev": "concurrently \"npm run watch\" \"dumi dev\""
}

实现效果：

组件库代码变更自动编译
文档站点实时刷新
开发效率提升300%

name: CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      uses: actions/checkout@v2
      run: npm install
      run: npm run build

集成gh-pages自动发布：

{
  "scripts": {
    "deploy": "dumi build && gh-pages -d dist"
  }
}

代码变更需包含单元测试
提交信息遵循Angular规范
关联对应GitHub Issue

建立Markdown代码审查机制：

API文档必须包含类型定义
示例代码需通过ESLint校验
中文文档需同步更新英文版本

完成本章配置后，您将获得：

企业级文档站点：支持主题定制、多语言、版本控制
高效开发闭环：代码变更→文档更新→自动部署
标准化协作流程：从开发到发布的完整规范

本系列已完整展示monorepo组件库开发的全流程，所有源代码已在GitHub开源。欢迎通过Star项目或提交PR参与共建，更多高级功能可查看项目Issue区。如果本教程对您有帮助，欢迎点赞支持，您的鼓励是我们持续输出的最大动力！

从 0 到 1 搭建基于 antd 的 monorepo 库，使用 dumi 展示文档（五）

一、深度定制dumi文档主题

1.1 主题配置文件解析

1.2 组件示例增强方案

二、Monorepo多包联调策略

2.1 依赖链路可视化

2.2 热更新联调方案

三、自动化部署流水线

3.1 GitHub Actions配置

3.2 文档站点部署

四、项目协作规范

4.1 PR提交规范

4.2 文档协作流程

五、项目成果展示

真人堂