阅读 6394

手把手实战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插件集合