公司目前有很多后台管理系统,目前代码量都越来越大,在开发的过程中,我们也秉承着提取公共组件,通过复用组件来减少开发工作量,随着公共组件数量的增加,新同事想要快速了解公共组件如何使用,需要到具体的业务页面中去看,这样子学习组件的成本太大,于是就想给每个组件提供一个文档,来解释组件如何使用。
恰巧之前有同事分享过storybook,听闻效果不错,就准备尝试一下~~
storybook
storybook,人如其名,它将实例化的组件称之为story,不同组件的不同实例化组成了一本 ◤故事书◢。每个组件可以有多个故事,故事之间不同一般是因为入参不同,幻化出的组件不同功能。厉害的它还支持很多插件,来扩展这本故事书。
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">
您可能感兴趣的文章:
如对本文有疑问, 点击进行留言回复!!
相关文章:
-
-
在因特网上传送URL,只能采用ASCII字符集,即是常说的get请求只能使用ASCII 字符也就是说URL只能使... [阅读全文]
-
微信小程序关于商品详情类的富文本解析器富文本的解析,在vue中有v-html解析富文本的方法,但是在微信小程序中... [阅读全文]
-
1、检查自己是否开启IIS,如果开启把IIS关闭后,尝试打开Apache,看是否能成功2、如果还是无法打开,需要... [阅读全文]
-
24.给定一个链表,两两交换其中相邻的节点,并返回交换后的链表。你不能只是单纯的改变节点内部的值,而是需要实际的... [阅读全文]
-
egg项目npm/cnpm出错Connect timeout
egg-init脚手架,项目安装使用国内镜像,安装过程老是报错,不是超时就是包不存在,究其原因主要是timeou... [阅读全文] -
使用 NodeJS 搭建一个小型脚手架工具脚手架目录结构└───template/.................. [阅读全文]
-
记录:nginx 开启Gzip压缩功能 # GZip压缩 gzip on; ... [阅读全文]
网友评论