隨著業(yè)務(wù)的擴(kuò)展和公司品牌的重視，我們會發(fā)現(xiàn)越來越多的業(yè)務(wù)需要重新整合，這時候需要我們提供一些底層的能力來支撐未來更復(fù)雜的設(shè)計(jì)，和優(yōu)化我們的產(chǎn)研結(jié)構(gòu)、工作方向。
打造底層能力重要的一項(xiàng)就是組件庫的搭建，如果我們業(yè)務(wù)多元化，每一個方向都需要一個項(xiàng)目來承接，我們需要重復(fù)配置初始化不同的項(xiàng)目，這顯然會額外增加不少的開發(fā)時間，為節(jié)省成本我們可能會想到有沒有一個開箱即用的庫可以解決這一系列的問題？
答案無疑是肯定的，這件事情也有人早就想到了。
下面，我們來一起關(guān)注下，究竟是什么庫可以解決我們的這個問題：
dumi
什么是 dumi？
dumi 是基于 Umi 打造、為組件開發(fā)場景而生的文檔工具。
也就是說，dumi 是可以用來寫文檔、官網(wǎng)和組件庫 Demo 的 Umi。
有什么功能呢？
可以與 umi 項(xiàng)目集成
豐富的文檔編寫語法
約定式路由
移動端組件 demo 示例
可自定義主題
dumi 是怎么使用的呢？
初始化
首先需要有
node，且node版本是 10.13 或以上。其次新建文件夾，用來安裝
dumi。
mkdir myapp && cd myapp
安裝
- 現(xiàn)在，我們來初始化一個文檔模式的組件庫開發(fā)腳手架：
npx @umijs/create-dumi-lib
或者使用 yarn：
yarn create @umijs/dumi-lib
- 我們再來嘗試初始化一個站點(diǎn)模式的組件庫開發(fā)腳手架：
npx @umijs/create-dumi-lib --site
或者使用 yarn：
yarn create @umijs/dumi-lib --site
- 我們也可以初始化一個靜態(tài)站點(diǎn)的腳手架，即一個多語言的站點(diǎn)模式腳手架，僅包含文檔。
npx @umijs/create-dumi-app
或者使用 yarn：
yarn create @umijs/dumi-app
調(diào)試及構(gòu)建
- 我們可以使用如下命令開始調(diào)試組件或編寫文檔：
npm run dev 或 npx dumi dev
- 最后使用如下命令構(gòu)建及部署：
npm run build 或 npx dumi build
構(gòu)建默認(rèn)會輸出到 dist 目錄下，我們可以將 dist 目錄部署在 now.sh、GitHub Pages 等靜態(tài)站點(diǎn)托管平臺或者某臺服務(wù)器上。
現(xiàn)在我們搭建一個組件項(xiàng)目看看吧
使用命令創(chuàng)建可以發(fā)現(xiàn)如下：
從上述圖片中，我們可以發(fā)現(xiàn)項(xiàng)目中已經(jīng)包含了測試文件，從此，我們可以快樂地開發(fā)組件和 UT 了。
注意：目前文檔只支持
md格式。
安裝好依賴運(yùn)行下項(xiàng)目：
現(xiàn)在我們已經(jīng)可以正常的調(diào)試了。
我們在 src 目錄下新建個文件夾 test 及內(nèi)部含有 3 個文件，分別是：index.md、index.test.tsx、index.tsx。
現(xiàn)在已經(jīng)建好了文件，我們還需要在入口文件 index.tsx 導(dǎo)出新建的文件。
我們運(yùn)行下項(xiàng)目：
當(dāng)我們有需求想展示源代碼的時候，可以使用 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>
如果我們需要定位，也請放心使用，我們不會飛出去，只需設(shè)置 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 的形式展示的話，可以設(shè)置 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>
);
當(dāng)然，我們也可以使用系統(tǒng)內(nèi)置的組件：
<Alert type="info">
哈哈，我是一個 Alert
</Alert>
標(biāo)簽測試 <Badge>Hello</Badge>
我們再嘗試 build 下組件：
項(xiàng)目中會多一個 es 文件夾：
最后，我們 build 下文檔：
此時的目錄結(jié)構(gòu)會多了個 docs-dist 文件夾：
總結(jié)：現(xiàn)在我們可以使用 dumi 開發(fā)組件庫和編寫文檔了，而且無需配置，只需要快樂地編寫代碼。
