dumi开发和常见问题

dumi官网：https://d.umijs.org/zh-CN
father-build（github）：https://github.com/umijs/father

开始

初始化一个文档模式的脚手架

yarn create @umijs/dumi-lib

注：初始化完成，再执行yarn安装依赖，就可以执行package.json里的scripts命令运行看效果了。

配置文件

》.umirc.ts，dumi配置文件。
》.fatherrc.ts，father-build的配置文件，用于组件库打包。
注：组件打包发布用的是father-build，所以光配置.umirc.ts可能运行是正常的，但打包却看不到效果。

侧边栏分组

想要对组件进行分组，在侧边栏进行分组展示，可利用 FrontMatter 配置项的group来设置。例：在组件的md文件头部加入以下内容，父级显示文本项下就会有一个侧边栏显示文本项。

---
title: 侧边栏显示文本
group: 
  title: 父级显示文本
---

常见报错

1、引用了样式文件等，可能遇到报错Cannot find module …。

解决方式： import哪种文件类型报错，就在根目录的typings.d.ts文件中添加哪种文件类型。例：

declare module '*.css';
declare module '*.less';
declare module '*.png';

这时候运行应该没问题了，但是打包还是不行，因为father-build没管typings.d.ts这个文件。

解决方式： 在入口文件index.ts中添加：

/// <reference path="../typings.d.ts" />

注：在github issure中找到的解决方式。

2、less样式不生效。运行、deploy都没问题了，但是npm publish的组件竟然没有样式。

因为打包之后类名全部变成undefined，所以想是不是不能样式私有化。

import styles from './index.less';
改成
import './index.less';

改完之后元素上的类名能正常显示了，但是还是没有加载样式效果。

后来发现reset样式 .css 是加载成功了的，那就说明是less文件解析的问题了，就去father-build文档里找了一下less解析。

解决方式： 在.fatherrc.ts配置里加入以下配置就解决了。

lessInBabelMode: true,

注：后来证明打包后类名变成undefined也是因为less解析的问题。