公司目前有很多后台管理系统，目前代码量都越来越大，在开发的过程中，我们也秉承着提取公共组件，通过复用组件来减少开发工作量，随着公共组件数量的增加，新同事想要快速了解公共组件如何使用，需要到具体的业务页面中去看，这样子学习组件的成本太大，于是就想给每个组件提供一个文档，来解释组件如何使用。

恰巧之前有同事分享过storybook，听闻效果不错，就准备尝试一下~~

storybook

storybook，人如其名，它将实例化的组件称之为story，不同组件的不同实例化组成了一本 ◤故事书◢。每个组件可以有多个故事，故事之间不同一般是因为入参不同，幻化出的组件不同功能。厉害的它还支持很多插件，来扩展这本故事书。

从组件文档引发的* ◤1◢

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搭建的，查找了一下居然有人解决过这个问题，就参考了中的解决方法。

写一个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">

打赏

微信扫一扫

Support URL

如您有任何疑问或者建议，请通过以下方式与我们取得联系，我们会尽快响应您的反馈：邮箱：eighteyes_cn@163.com ... [阅读全文]
CSS类的操作

CSS类的操作 ~~~javascript 点击按钮以后修改box的样式点击按钮以后删除box的样式 ~~~ ... [阅读全文]
Mysql基于Mysql Cluster+MysqlRouter的集群部署方案

http://note.youdao.com/noteshare?id=a61c4a6ff2b76e5305430eb66eb116e2&s... [阅读全文]
echart的legend不显示问题

legend的data与series的name 两者必须同时存在，且数量和文字内容必须一致。 ... [阅读全文]
jquery实现商品sku多属性选择（商品详情页）

转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果源码 &l... [阅读全文]