dumi是一款react 组件库开发场景的文档工具。是阿里开源的工具链。
其实文档工具还有一些其他选择，比如docz，storybook。
能直接对比的是storybook。storybook和dumi一样是用于组件库开发的文档工具，github上有71.1k的star。而dumi有2.3k的star，可见总体上storybook的使用人数应该比dumi多很多。而且storybook推出的时间也比dumi早很多。
storybook支持 vue，react，augular，而dumi目前只支持了react。
不过dumi也有优势，就是用起来更简单。开箱即用。默认生成的文档就很不错了。可以写出类似antd那种文档。storybook配置起来就花里胡哨了。
安装
建一个git仓库，执行下面的代码创建脚手架。
$ npx @umijs/create-dumi-lib --site # 初始化一个站点模式的组件库开发脚手架
# or
$ yarn create @umijs/dumi-lib --site
然后我们执行 yarn 安装依赖
切换默认语言为中文
公司内部的文档，并没有外国人会看，所以默认语言切换为中文比较合适。
根目录找到.umirc.ts文件
添加下面的配置
locales: [
['zh-CN', '中文'],
['en-US', 'English'],
],
初始的默认语言为英文。想要添加其他语言的文档，只要创建类似这样命名的markdown文档就行了index.zh-CN.md
index.md的markdown文档会被作为默认语言的文档，所以只要在配置里面切换默认语言为中文，那么以后添加英文版的时候，创建index.en-Us.md这种文档就可以了。
添加scss支持
dumi默认的css预处理器是less。
我还是习惯用scss，dumi是基于umijs的库，
我们只要安装这个umijs的插件即可@umijs/plugin-sass
yarn add @umijs/plugin-sass --dev
然后我们在typings.d里面加上下面一行，不然引入scss的module的时候vscode会报错。
declare module '*.scss';
这个插件默认用的是dart sass
也可以切换为node-sass，需要先安装'node-sass'依赖，然后配置(不过其实没什么必要，dart的性能更好，sass官方推荐的也是dart)
export default {
sass: {
implementation: require('node-sass'),
},
}
还要注意的一点是 build的默认配置是不支持 sass的 https://github.com/umijs/father
所以我们要修改这个.fatherrc.ts的配置,esm改成rollup模式
export default {
esm: 'rollup',
sassInRollupMode: {},
}
关于dumi的路由
dumi支持约定式路由。
src目录下面的第一层目录就会被当成顶部导航栏的项目名，第二层目录以后则是在左侧的目录体现。
因为项目的文件夹我们肯定都是字母，所以是不符合文档的需求的。
可以通过在markdown顶部的frontmatter进行配置。
nav这边的title是顶部导航栏的title
group则是左侧目录的分组
---
title: 自定义页面名称
nav:
path: /自定义导航路由
title: 自定义导航名称
order: 控制导航顺序，数字越小越靠前，默认以路径长度和字典序排序
group:
path: /自定义分组路由，注意，分组路由 = 导航路由 + 自己
title: 自定义分组名称
order: 控制分组顺序，数字越小越靠前，默认以路径长度和字典序排序
---
<!-- 其他 Markdown 内容 -->
我们开发的时候，在src目录下建一个components目录(默认导航栏里就会有一项components)，然后在里面建各个组件的目录就比较合适。
网友评论