一文看懂 dumi 组件库发包与文档部署全流程！

想把自己的 React 组件库优雅地发到 npm，还能拥有炫酷的在线文档？这篇就是你的终极保姆级教程！

bash 复制代码

pnpm dumi dev

本地启动文档站点，边写边看，体验极佳！

bash 复制代码

pnpm dumi build

会生成 docs-dist/ 目录，里面就是静态文档站点。

dumi 官方推荐直接用 father 作为打包工具，生态集成好、配置简单。一般只需在根目录加一个 .fatherrc.ts 配置文件，例如：
ts 复制代码
```
// .fatherrc.ts
import { defineConfig } from 'father';
export default defineConfig({
    cjs: { output: 'lib' },
    esm: { output: 'es' },
    // 还可以配置类型输出、打包样式等
});
```
然后执行：
bash 复制代码
```
pnpm father build
```
即可自动把 src/ 编译到 lib/ 和 es/ 目录。
检查 package.json 的 main、module、types 字段，确保指向正确（如 main 指向 lib/index.js，module 指向 es/index.js，types 指向 dist/types/index.d.ts）。
用 .npmignore 或 files 字段排除无关内容。

bash 复制代码

pnpm link

在其他项目里 link 试用，确保没问题。

bash 复制代码

pnpm add gh-pages -D

json 复制代码

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

bash 复制代码

pnpm run docs:build
pnpm run docs:deploy

gh-pages 会自动把 docs-dist/ 推到 gh-pages 分支。

在仓库 Settings → Pages，选择 gh-pages 分支作为 Pages 源，几分钟后就能在线访问你的文档啦！

只要跟着本文流程走，dumi 组件库发包和文档部署再也不迷路！有问题欢迎评论区交流～

比如这个 React 虚拟列表包，欢迎体验：