从零开始搭建react storybook

1.在线安装并运行storybook

npm i -g @storybook/cli
getstorybook

该运行命令会在项目根目录下生成一个新的目录stories和.storybook, 该目录是一个完整的，独立的React应用，stories里的index.js是所有组件的出口文件，.sotorybook是配置文件。

image.png

2.自动更改package.json文件

当前项目中的package.json的scripts会自动中插入一条命令

"scripts": {
    ...
    "storybook": "storybook start -p 6006",
    "build-storybook": "build-storybook",
    ...
  }

3.启动storybook

npm run storybook

运行完之后，访问http://localhost:6006/，然后我们可以看到这样的界面：

image.png

4.编辑stores/index.js，并引入组件，如src/components/index.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Index from '../src/containers/index';

storiesOf('Button', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>)
  .add('首页', () => <Index />);

5.运行storybook

npm run storybook

打开http://localhost:6006/页面，我们就可以看到相应的组件了。

storybook官网 https://storybook.js.org/basics/quick-start-guide/