Open liyatang opened 5 years ago
总在一些技术文章中看到 storybook ,也没有去关注,只是知道用来高效构建 UI 组件的东东。 之前也花了点时间了解过,体会不到其好。 最近组件库碰到了维护消极的阻碍,正打算寻找合适的方案来优化。于是周末花了点时间接触了下,还是眼前了一亮。
我对组件文档的要求是
参考了各大库对文档的做法,比较喜欢 Element 的做法,不过他之前是 Vue 的。于是学习了下,折腾了下 markdown-it 方案,搞了个插件 markdown-it-react-loader 。都已经是 3 years ago,:cry:
目前遇到的问题
周末也看了 create-react-app,里面也建议使用 storybook 来构建 UI 组件。
就不细讲了,storybook 入门真的超级简单。 具体见 react-gm
storebook 是一个独立的环境,所以需要再 .storybook/config.js 里 引入你的 css 如果你是 less,还需要有个 .storybook/webpack.config.js,加入处理 less 的相关配置
.storybook/config.js
.storybook/webpack.config.js
storybook 默认的配置会默认 include 项目跟目录 和 exclude node_modules。所以 node_modules 的模块是不会构建的,此时重写即可
config.module.rules[0].exclude = function(filepath) { if (filepath.includes('/node_modules/gm-util/')) { return false } return filepath.includes('/node_modules/') }
storybook 展示UI组件很方便,直接写组件即可,但是写逻辑组件就要转换下思路了。 使用 mobx 数据流 在 .storybook/config.js 上加入代码
addDecorator(storeFn => <Observer>{() => storeFn()}</Observer>)
在 stories.js 中
import React from 'react' import { storiesOf } from '@storybook/react' import Button from './index' import { observable } from 'mobx' const store = observable({ count: 0, addCount() { this.count++ } }) storiesOf('Button', module) .add('with mobx', () => ( <Button onClick={() => store.addCount()}>aaa{store.count}</Button> ))
why storybook?
总在一些技术文章中看到 storybook ,也没有去关注,只是知道用来高效构建 UI 组件的东东。 之前也花了点时间了解过,体会不到其好。 最近组件库碰到了维护消极的阻碍,正打算寻找合适的方案来优化。于是周末花了点时间接触了下,还是眼前了一亮。
我对组件文档的要求是
参考了各大库对文档的做法,比较喜欢 Element 的做法,不过他之前是 Vue 的。于是学习了下,折腾了下 markdown-it 方案,搞了个插件 markdown-it-react-loader 。都已经是 3 years ago,:cry:
目前遇到的问题
周末也看了 create-react-app,里面也建议使用 storybook 来构建 UI 组件。
那 storybook 带来了什么?
怎么用 storybook
就不细讲了,storybook 入门真的超级简单。 具体见 react-gm
可能会遇到的疑惑
组件样式不生效?
storebook 是一个独立的环境,所以需要再
.storybook/config.js
里 引入你的 css 如果你是 less,还需要有个.storybook/webpack.config.js
,加入处理 less 的相关配置babel 没构建到 node_modules 的模块?
storybook 默认的配置会默认 include 项目跟目录 和 exclude node_modules。所以 node_modules 的模块是不会构建的,此时重写即可
逻辑组件没用?
storybook 展示UI组件很方便,直接写组件即可,但是写逻辑组件就要转换下思路了。 使用 mobx 数据流 在
.storybook/config.js
上加入代码在 stories.js 中