公司目前有很多後臺管理系統，目前代碼量都越來越大，在開發的過程中，我們也秉承著提取公共組件，通過復用組件來減少開發工作量，隨著公共組件數量的增加，新同事想要快速瞭解公共組件如何使用，需要到具體的業務頁面中去看，這樣子學習組件的成本太大，於是就想給每個組件提供一個文檔，來解釋組件如何使用。

恰巧之前有同事分享過storybook，聽聞效果不錯，就準備嘗試一下~~

storybook

storybook，人如其名，它將實例化的組件稱之為story，不同組件的不同實例化組成了一本 ◤故事書◢。每個組件可以有多個故事，故事之間不同一般是因為入參不同，幻化出的組件不同功能。厲害的它還支持很多插件，來擴展這本故事書。

React項目集成storybook

在現有的項目集成storybook，最大的問題是需要將已有的webpack配置和storybook自己的webpack配置集成到一起。

安裝storybook

有兩種方式（手動和自動），具體可以參考官方文檔。

我是採用的手動的方式，覺得比較可控一些。

npm install @storybook/react --save-dev

增加配置文件

在根目錄創建文件夾.storybook，然後創建config.js，這個配置文件主要是為了告訴storybook哪些文件是story文件。

import { configure } from '@storybook/react';
// 查找src目錄下尾碼是.stories.js的文件，就是story
configure(require.context('../src', true, /\.stories\.js$/), module);

合併webpack.config.js

storybook要載入你寫的組件，需要依賴你的webpack.config.js來編譯代碼，參考具體文檔。

因為我們的項目是使用的ant.desgin pro搭建的，查找了一下居然有人解決過這個問題，就參考了github issues中的解決方法。

寫一個story

story其實就是引入組件，並實例化組件的過程，具體的代碼如下。

import React from 'react';
import {storiesOf} from '@storybook/react';
import { Button } from '@storybook/react/demo'; 

const stories = storiesOf('Button', module);

stories.add(
    'withText',
    () => {
        return <Button>Hello Button</Button>;
    }
).add(
    'withEmoji',() => {
        return <Button><span role="img" aria-label="so cool">