手把手實戰react + storybook元件庫

引入

在UI元件庫的開發過程中，如何方便的展示元件，測試元件，編寫文件呢？storybook就提供了這樣一種工具，利用它我們可以更方便地進行UI元件開發。最近一直在研究react，react和storybook的碰撞會是怎麼樣的呢。下面將從零開始，運用storybook手把手擼一個react元件。

快速搭建react環境

首先，基於create-react-app快速搭建react環境

storybook有單獨的webpack配置，有單獨的伺服器。它的webpack配置類似於create-react-app。

npm i -g create-react-app
create-react-app storybook-demo
cd storybook-demo
yarn start
複製程式碼

在命令列工具中執行上述命令，快速生成了一個已經配置好react環境的storybook-demo專案檔案，進入該專案檔案，通過yarn start啟動webpack伺服器，操作無誤的話，瀏覽器將會自動開啟如下頁面：

安裝storybook

搭配好react環境後，安裝storybook外掛

npm i --save-dev @storybook/react
複製程式碼

配置npm scripts

之前已經提到過，storybook有單獨的伺服器，可以在npm scripts新增相關命令指令碼，方便之後啟動服務。

開啟package.json，在scripts屬性中新增storybook命令，如下：

{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook"
  }
}
複製程式碼

注意，指令碼中-p 9001表示啟動服務的埠號是9001，-c .storybook表示配置檔案的目錄，這裡將配置檔案設定為根目錄下的.storybook資料夾。

建立配置檔案config.js

在專案根目錄中新建.storybook目錄，並在裡面新增config.js檔案。 基本的配置主要是用來告訴storybook你的stories的存放位置。 我們將stories放在src目錄下。

// config.js
import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories/index.js');
}

configure(loadStories, module);

// 
複製程式碼

建立stories

接下來登場的就是stories，這是storybook的核心所在。 開啟src目錄，建立stories資料夾，同時可以建立components資料夾。 在components中，建立一個Button.js元件，在stories新增button.stories

// .storybook/config.js中修改路徑
import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories/button.stories.js');
}

configure(loadStories, module);

// src/stories/button.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import {Button} from '../components/Button';

storiesOf('Button', module)
  .add('基本用法',() => (
    <Button>按鈕</Button>
  ))
  
// src/components/Button.js
import React from 'react'

export class Button extends React.Component{
  constructor (props) {
    super(props)    
  }

  render () {
    return (
      <button style={{backgroundColor: '#fff', border: '1px solid #ccc'}}>{this.props.children}</button>
    )
  }
}

複製程式碼

這裡，在config.js中僅引入了button的story，如果元件比較多，有沒有批量引入stories的方法呢？ 可以使用require.context方法，此處將src/stories資料夾中以.stories.js為字尾的檔案批量匯入。

require.context是webpack的方法，具體參考require.context

import { configure } from '@storybook/react';

const req = require.context('../src/stories', true, /\.stories\.js$/)

function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);
複製程式碼

啟動storybook服務

yarn storybook
複製程式碼

在瀏覽器中開啟http://localhost:9001，成功後會出現以下頁面，證明你成功了！

新增額外元件資訊

想要形成一個完整的元件文件，需要展示出元件的各種資訊，上面展示的資訊是遠遠不夠的。為此，可以安裝addon-info外掛。外掛更多資訊參考addon-info

npm i -D @storybook/addon-info
複製程式碼

在button.stories.js檔案中引入withInfo方法，引數可以是字串，支援markdown

// src/stories/button.stories.js
import { withInfo } from '@storybook/addon-info';

storiesOf('Button', module)
  .add('基本用法',
    withInfo(`
      description or documentation about my component, supports markdown
    
      ~~~js
      <Button>測試按鈕</Button>
      ~~~
    
    `)(() =>
      <Button>測試按鈕</Button>
    )
  )
複製程式碼

此時瀏覽器頁面更新如下。點選右側的show info按鈕，可以看到我們新增的元件資訊。

使用markdown

可以將元件資訊抽出來放在md檔案中。直接上程式碼：

// src/stories/button.md
description or documentation about my component, supports markdown
<Button>測試按鈕</Button>
複製程式碼

// src/stories/button.stories.js
import { withInfo } from '@storybook/addon-info';
import button from './button.md'

storiesOf('Button', module)
  .add('基本用法',
    withInfo({
      markdown: button
    })(() =>
      <Button>測試按鈕</Button>
    )
  )
複製程式碼

元件資訊單頁顯示

如何直接讓元件資訊在當前頁面顯示呢？在withInfo配置中新增inline:true

storiesOf('Button', module)
  .add('基本用法',
    withInfo({
      inline: true,
      markdown: button
    })(() =>
      <Button>測試按鈕</Button>
    )
  )

複製程式碼

最後

storybook功能還有很多，有興趣的小夥伴可以再深入研究研究。

storybook官網：storybook

更多的addon外掛可以參考：addon外掛集合