dumi，中文发音嘟米，是一款为组件开发场景而生的文档工具，与 father 一起为开发者提供一站式的组件开发体验，father 负责构建，而 dumi 负责组件开发及组件文档生成。

环境

  • 确保 node 版本是 10.13 或以上

脚手架

  1. $ npx @umijs/create-dumi-lib        # 初始化一个文档模式的组件库开发脚手架
  2. # or
  3. $ yarn create @umijs/dumi-lib
  4. $ npx @umijs/create-dumi-lib --site # 初始化一个站点模式的组件库开发脚手架#
  5. # or
  6. $ yarn create @umijs/dumi-lib --site

目录结构

  • .umirc.ts 链接 dumi 配置文件（也可以是 config/config.ts）

  • .fatherrc.ts father-build 的配置文件，用于组件库打包

    安装与配置相关依赖

  • 安装项目依赖

  • 安装 antd 相关依赖
    npm i -D antd babel-plugin-import

  • 配置按需加载
    /.umirc.ts

    1. ● extraBabelPlugins: [
    2. [
    3.   'babel-plugin-import',
    4.   {
    5.     libraryName: 'antd',
    6.     libraryDirectory: 'es',
    7.     style: true,
    8.   },
    9. ]
    10. ]

    编写

  • index.ts导出方法或组件

  • 约定式生成文档，或者配置 dumi 嗅探的文档目录

  • 有引入第三方依赖需要过滤接口属性

    1. apiParser: {
    2.   // 自定义属性过滤配置，也可以是一个函数，用法参考：https://github.com/styleguidist/react-docgen-typescript/#propfilter
    3.   propFilter: {
    4.     // 是否忽略从 node_modules 继承的属性，默认值为 false
    5.     skipNodeModules: true,
    6.   }
    7. }

    demo文件

  • tsconfig.json文件中添加路径别名，模拟引入

  • mdx语法编写文档生成demo及路由 基于docz编写

    打包

  • 配置.fatherrc.ts 详细请跳转

  • 配置环境入口 
    1. main：指定包的入口文件，此处指定为 lib/index.js 。
    2. module：指定包的基于 ESM 规范的入口文件，此处指定为 es/index.esm.js 。
    3. typings：指定包的类型声明文件，此处指定为 lib/index.d.ts 。
    4. files：指定需要推送至 npm 的文件，此处指定为 [“es”,“lib”] 。
    5. peerDependencies：指定使用包的项目所需要依赖的模块，由于项目是 React 项目，并且存在依赖于 Ant-Design 组件库的组件，因此此处指定为 react、react-dom、antd

发布

  1. 发布至npm

2.部署至gitpage

  • 在umirc.ts中配置路由 // gitpage base: /${repo}/, publicPath: /${repo}/
  • npm run docs:build // 生成组件文档
  • gitignore 忽略打包产物
  • 推送至 Git仓库

  • 配置 Git Pages

    antd-match

  • dumi开发的组件库demo - git地址（可参考使用）

https://github.com/jpining/antd-match