手把手實戰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插件集合