如何从0到1搭建基于antd的monorepo库——使用dumi进行文档展示（五）

文章系列

上一章：如何从0到1搭建基于antd的monorepo库------JsonSchemaForm组件优化（四）

作者有话说

目前已经实现了一部分功能，源代码在 github，欢迎大家 Star 和 PR，一些待实现的功能都在 issue 中，感兴趣的同学可以一起加入进来。

看完这个系列可以收获什么：

如何使用 pnpm workspace + lerna 搭建 monorepo 仓库
antd 的单个组件怎么进行文件结构的设计
基于 antd form 实现一个 Json 渲染表单
antd 的打包方式以及如何使用 rollup 实现
如何发布 monorepo 包到 npm

前瞻

组件库技术选型：

pnpm 10
node 20
lerna 8
react 18
antd 5
dumi 2

正片开始

配置 dumi

在项目根目录下新增 .dumirc.ts 文件。

ts 复制代码

import { defineConfig } from 'dumi';
import path from 'path';

export default defineConfig({
  resolve: {
    atomDirs: [
      { type: 'basic', dir: 'packages/basic/src' },
      { type: 'utils', dir: 'packages/utils/src' },
    ],
  },
  alias: {
    '@kc-components/basic': path.resolve(__dirname, './packages/basic/src'),
    '@kc-components/utils': path.resolve(__dirname, './packages/utils/src'),
  },
});

首页

在根目录下新增 docs/index.md。

markdown 复制代码

---
hero:
  title: kc-components
  description: 基于 antd 二次封装的组件库
  actions:
    - text: 基础组件
      link: /basics
    - text: 工具
      link: /utils
features:
  - title: 基础组件
    emoji: 🌈
    description: 基于 antd 二次封装的基础组件
  - title: 工具
    emoji: 🚀
    description: 组件库的工具集合
---

组件入口页

新增 packages/basic/src/index.md 文件。

markdown 复制代码

---
nav:
  title: 基础组件
  order: 0
---

# 快速开始

JsonSchemaForm 组件页

新增 packages/basic/src/JsonSchemaForm/index.md 文件。

markdown 复制代码

# JsonSchemaForm

## 基本用法

```tsx
import { InboxOutlined, UploadOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { JsonSchemaForm, JsonSchemaFormItemType } from '@kc-components/basic';

const schema: JsonSchemaFormItemType[] = [
  {
    $type: 'input',
    formItemProps: {
      label: '用户名',
      name: 'username',
      rules: [{ required: true, message: '用户名不能为空！' }],
    },
    placeholder: '请输入用户名',
  },
  {
    $type: 'password',
    formItemProps: {
      label: '密码',
      name: 'password',
      rules: [{ required: true, message: '密码不能为空！' }],
    },
    placeholder: '请输入密码',
  },
]

export default () => {
  return (
    <JsonSchemaForm
      schema={schema}
      formProps={{
        onFinish(values) {
          console.log('values---', values);
        },
      }}
    />
  );
};
```  // 代码

启动文档服务

在根目录下的 packages.json 中新增脚本。

json 复制代码

{
  "scripts": {
    "docs:dev": "dumi dev",
    "docs:build": "dumi build",
    "docs:preview": "dumi preview",
    "prepare": "husky install && dumi setup",
  }
}

然后运行 pnpm docs:dev 即可启动文档服务。

总结

至此，基于 dumi 的文档服务已经实现，想要查看更多用法可以去官方文档，或者我的项目查看，文章中就不展开说明了。

在文档中进行调试、修改后组件已经达到了想要的效果，这时候就需要对组件库进行打包发布了，接下来，我们会通过 rollup 对组件库进行打包（打包产物采用 antd 格式），以及使用 lerna 进行版本管理以及 npm 发布。

如果想提前知道更多内容可以直接查看github，欢迎大家 Star 和 PR，如有疑问可以评论或私信。