随着业务的扩展和公司品牌的重视，我们会发现越来越多的业务需要重新整合，这时候需要我们提供一些底层的能力来支撑未来更复杂的设计，和优化我们的产研结构、工作方向。
打造底层能力重要的一项就是组件库的搭建，如果我们业务多元化，每一个方向都需要一个项目来承接，我们需要重复配置初始化不同的项目，这显然会额外增加不少的开发时间，为节省成本我们可能会想到有没有一个开箱即用的库可以解决这一系列的问题？
答案无疑是肯定的，这件事情也有人早就想到了。
下面，我们来一起关注下，究竟是什么库可以解决我们的这个问题：
dumi
什么是 dumi？
dumi 是基于 Umi 打造、为组件开发场景而生的文档工具。
也就是说，dumi 是可以用来写文档、官网和组件库 Demo 的 Umi。
有什么功能呢？
可以与 umi 项目集成
丰富的文档编写语法
约定式路由
移动端组件 demo 示例
可自定义主题
dumi 是怎么使用的呢？
初始化
首先需要有
node，且node版本是 10.13 或以上。其次新建文件夹，用来安装
dumi。
mkdir myapp && cd myapp
安装
- 现在，我们来初始化一个文档模式的组件库开发脚手架：
npx @umijs/create-dumi-lib
或者使用 yarn：
yarn create @umijs/dumi-lib
- 我们再来尝试初始化一个站点模式的组件库开发脚手架：
npx @umijs/create-dumi-lib --site
或者使用 yarn：
yarn create @umijs/dumi-lib --site
- 我们也可以初始化一个静态站点的脚手架，即一个多语言的站点模式脚手架，仅包含文档。
npx @umijs/create-dumi-app
或者使用 yarn：
yarn create @umijs/dumi-app
调试及构建
- 我们可以使用如下命令开始调试组件或编写文档：
npm run dev 或 npx dumi dev
- 最后使用如下命令构建及部署：
npm run build 或 npx dumi build
构建默认会输出到 dist 目录下，我们可以将 dist 目录部署在 now.sh、GitHub Pages 等静态站点托管平台或者某台服务器上。
现在我们搭建一个组件项目看看吧
使用命令创建可以发现如下：
从上述图片中，我们可以发现项目中已经包含了测试文件，从此，我们可以快乐地开发组件和 UT 了。
注意：目前文档只支持
md格式。
安装好依赖运行下项目：
现在我们已经可以正常的调试了。
我们在 src 目录下新建个文件夹 test 及内部含有 3 个文件，分别是：index.md、index.test.tsx、index.tsx。
现在已经建好了文件，我们还需要在入口文件 index.tsx 导出新建的文件。
我们运行下项目：
当我们有需求想展示源代码的时候，可以使用 pure 修饰符告诉 dumi：
```tsx | pure
import React from 'react';
import { Test } from 'dumi-app';
export default () => <Test title="First Demo" />;
如果示例代码有很多写在这里也会很不方便，这时我们可以引入外部文件：
<code src="/src/demo.tsx"></code>
如果我们需要定位，也请放心使用，我们不会飞出去，只需设置 transform 为 true：
```tsx | transform
import React from 'react';
export default () => <h1 style={{ position: 'fixed', top: 0, left: 0 }}>我不会飞出去</h1>;
如果想嵌入到文档，可以使用 inline：
```jsx
/**
* inline: true
*/
import React from 'react';
export default () => '我会被直接嵌入';
如果需要以 iframe 的形式展示的话，可以设置 iframe 为 true：
```jsx | iframe
import React from 'react';
export default () => (
<h2 style={{ boxShadow: '0 2px 15px rgba(0,0,0,0.1)', padding: '5px 20px' }}>iframe 模式</h2>
);
当然，我们也可以使用系统内置的组件：
<Alert type="info">
哈哈，我是一个 Alert
</Alert>
标签测试 <Badge>Hello</Badge>
我们再尝试 build 下组件：
项目中会多一个 es 文件夹：
最后，我们 build 下文档：
此时的目录结构会多了个 docs-dist 文件夹：
总结：现在我们可以使用 dumi 开发组件库和编写文档了，而且无需配置，只需要快乐地编写代码。
