隨著業(yè)務(wù)的擴(kuò)展和公司品牌的重視碴裙，我們會(huì)發(fā)現(xiàn)越來(lái)越多的業(yè)務(wù)需要重新整合薇芝，這時(shí)候需要我們提供一些底層的能力來(lái)支撐未來(lái)更復(fù)雜的設(shè)計(jì)，和優(yōu)化我們的產(chǎn)研結(jié)構(gòu)跪但、工作方向。
打造底層能力重要的一項(xiàng)就是組件庫(kù)的搭建峦萎，如果我們業(yè)務(wù)多元化特漩，每一個(gè)方向都需要一個(gè)項(xiàng)目來(lái)承接吧雹，我們需要重復(fù)配置初始化不同的項(xiàng)目，這顯然會(huì)額外增加不少的開發(fā)時(shí)間涂身，為節(jié)省成本我們可能會(huì)想到有沒有一個(gè)開箱即用的庫(kù)可以解決這一系列的問(wèn)題雄卷？
答案無(wú)疑是肯定的，這件事情也有人早就想到了蛤售。
下面丁鹉，我們來(lái)一起關(guān)注下，究竟是什么庫(kù)可以解決我們的這個(gè)問(wèn)題：
dumi
什么是 dumi悴能？
dumi 是基于 Umi 打造揣钦、為組件開發(fā)場(chǎng)景而生的文檔工具。
也就是說(shuō)漠酿，dumi 是可以用來(lái)寫文檔冯凹、官網(wǎng)和組件庫(kù) Demo 的 Umi。
有什么功能呢炒嘲？
可以與 umi 項(xiàng)目集成
豐富的文檔編寫語(yǔ)法
約定式路由
移動(dòng)端組件 demo 示例
可自定義主題
dumi 是怎么使用的呢宇姚？
初始化
首先需要有
node，且node版本是 10.13 或以上夫凸。其次新建文件夾浑劳，用來(lái)安裝
dumi。
mkdir myapp && cd myapp
安裝
- 現(xiàn)在夭拌，我們來(lái)初始化一個(gè)文檔模式的組件庫(kù)開發(fā)腳手架：
npx @umijs/create-dumi-lib
或者使用 yarn：
yarn create @umijs/dumi-lib
- 我們?cè)賮?lái)嘗試初始化一個(gè)站點(diǎn)模式的組件庫(kù)開發(fā)腳手架：
npx @umijs/create-dumi-lib --site
或者使用 yarn：
yarn create @umijs/dumi-lib --site
- 我們也可以初始化一個(gè)靜態(tài)站點(diǎn)的腳手架魔熏，即一個(gè)多語(yǔ)言的站點(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)會(huì)輸出到 dist 目錄下蒜绽，我們可以將 dist 目錄部署在 now.sh、GitHub Pages 等靜態(tài)站點(diǎn)托管平臺(tái)或者某臺(tái)服務(wù)器上桶现。
現(xiàn)在我們搭建一個(gè)組件項(xiàng)目看看吧
使用命令創(chuàng)建可以發(fā)現(xiàn)如下：
從上述圖片中滓窍，我們可以發(fā)現(xiàn)項(xiàng)目中已經(jīng)包含了測(cè)試文件，從此巩那，我們可以快樂(lè)地開發(fā)組件和 UT 了吏夯。
注意：目前文檔只支持
md格式。
安裝好依賴運(yùn)行下項(xiàng)目：
現(xiàn)在我們已經(jīng)可以正常的調(diào)試了即横。
我們?cè)?src 目錄下新建個(gè)文件夾 test 及內(nèi)部含有 3 個(gè)文件噪生，分別是：index.md、index.test.tsx东囚、index.tsx跺嗽。
現(xiàn)在已經(jīng)建好了文件，我們還需要在入口文件 index.tsx 導(dǎo)出新建的文件。
我們運(yùn)行下項(xiàng)目：
當(dāng)我們有需求想展示源代碼的時(shí)候桨嫁，可以使用 pure 修飾符告訴 dumi：
```tsx | pure
import React from 'react';
import { Test } from 'dumi-app';
export default () => <Test title="First Demo" />;
如果示例代碼有很多寫在這里也會(huì)很不方便植兰，這時(shí)我們可以引入外部文件：
<code src="/src/demo.tsx"></code>
如果我們需要定位，也請(qǐng)放心使用璃吧，我們不會(huì)飛出去楣导，只需設(shè)置 transform 為 true：
```tsx | transform
import React from 'react';
export default () => <h1 style={{ position: 'fixed', top: 0, left: 0 }}>我不會(huì)飛出去</h1>;
如果想嵌入到文檔，可以使用 inline：
```jsx
/**
* inline: true
*/
import React from 'react';
export default () => '我會(huì)被直接嵌入';
如果需要以 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">
哈哈，我是一個(gè) Alert
</Alert>
標(biāo)簽測(cè)試 <Badge>Hello</Badge>
我們?cè)賴L試 build 下組件：
項(xiàng)目中會(huì)多一個(gè) es 文件夾：
最后巴元，我們 build 下文檔：
此時(shí)的目錄結(jié)構(gòu)會(huì)多了個(gè) docs-dist 文件夾：
總結(jié)：現(xiàn)在我們可以使用 dumi 開發(fā)組件庫(kù)和編寫文檔了毡咏，而且無(wú)需配置，只需要快樂(lè)地編寫代碼逮刨。
