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解析的问题。