学习 storybook 总结

[liyatang]

why storybook?

总在一些技术文章中看到 storybook ，也没有去关注，只是知道用来高效构建 UI 组件的东东。 之前也花了点时间了解过，体会不到其好。
最近组件库碰到了维护消极的阻碍，正打算寻找合适的方案来优化。于是周末花了点时间接触了下，还是眼前了一亮。

我对组件文档的要求是

• 有实际运行的组件效果
• 有源代码
• 有说明，且是 MD 写的

参考了各大库对文档的做法，比较喜欢 Element 的做法，不过他之前是 Vue 的。于是学习了下，折腾了下 markdown-it 方案，搞了个插件 markdown-it-react-loader 。都已经是 3 years ago，:cry:

目前遇到的问题

• 代码和文档不同步
• 文档编写靠约定，随着维护者越来越多，质量也下去了
• 写业务用库的时候，除了看文档外，还会看库的代码。但是往往得结合代码和文档一起看

周末也看了 create-react-app，里面也建议使用 storybook 来构建 UI 组件。

那 storybook 带来了什么？

• 以上痛点都解决了
• 很容易入门。生态也不错， storybook + 几个 Addons 即可搞定。自定义程度高。
• 喜欢其目录形式。以 故事 + 场景 为目录，组件使用者很容易就找到对应的文档。 以前目录是组件，一个组件一个页面，需要看完页面才能知道什么情况下怎么用。
• 代码即文档，不怕代码和文档不同步了
• 其他，自动化测试等。

怎么用 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 的模块是不会构建的，此时重写即可

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>
  ))