# 开发组件库时的问题 - create-react-app 入口文件不适合管理组件库（测试时） - 缺少行为追踪和属性调试功能 组件完美开发工具应有的特点： - 分开展示各个组件不同属性下的状态 - 能追踪组件的行为并且具有属性调试功能 - 可以为组件自动生成文档和属性列表 # Storybook 的使用（React） [https://storybook.js.org/](https://storybook.js.org/) 下面是我的版本（2020.6.11） ``` "devDependencies": { "@storybook/addon-actions": "^5.3.19", "@storybook/addon-links": "^5.3.19", "@storybook/addons": "^5.3.19", "@storybook/preset-create-react-app": "^3.0.0", "@storybook/react": "^5.3.19" } ``` 不同的项目搭建方式安装方法不同：[https://storybook.js.org/docs/guides/guide-react/](https://storybook.js.org/docs/guides/guide-react/) 因为本项目是 CRA + TypeScript，所以使用如下方式安装： ``` npx -p @storybook/cli sb init --type react_scripts ``` 注意：如果你之前用 cnpm 安装了其他包很可能会报错，这时候把 node_modules 整个文件夹删了，执行 npm i 重新安装一次。 这样安装就已经支持 typescript 了，省去了很多麻烦。 [https://blog.csdn.net/yehuozhili/article/details/106044494](https://blog.csdn.net/yehuozhili/article/details/106044494) ## 配置文件 ``` // .storybook/main.js module.exports = { stories: ['../src/**/*.stories.tsx'], addons: [ '@storybook/preset-create-react-app', '@storybook/addon-actions', '@storybook/addon-links', ] }; ``` ``` // .storybook/preview.js 加载样式 import { configure } from '@storybook/react' import "../src/styles/index.scss" configure(require.context('../src', true, /\.stories\.tsx$/), module) ``` ## 书写方式 [https://storybook.js.org/basics/writing-stories/](https://storybook.js.org/basics/writing-stories/) 有 CSF、classic storiesOf API、MDX syntax 三种方式，这里用比较经典的 classic 方式，因为 CSF 函数就是故事名，而中文文档函数名是中文是很不好的。 ``` import React from 'react' import { action } from '@storybook/addon-actions' import { storiesOf } from '@storybook/react' import Button from './button' const defaultButton = () => { return ( <Button onClick={action('clicked')}>default Button</Button> ) } const buttonWithSize = () => ( <> <Button size="lg"> large button </Button> <Button size="sm"> large button </Button> </> ) const buttonWithType = () => ( <> <Button btnType="primary"> primary button </Button> <Button btnType="danger"> danger button </Button> <Button btnType="link" href="https://google.com"> link button </Button> </> ) storiesOf('Button Component', module) .add('默认 Button', defaultButton) .add('不同尺寸的 Button', buttonWithSize) .add('不同类型的 Button', buttonWithType) ``` ## 插件介绍 [https://storybook.js.org/addons/](https://storybook.js.org/addons/) 安装插件后 main.js 导入，形式如下： ``` module.exports = { stories: ['../src/**/*.stories.tsx'], addons: [ '@storybook/preset-create-react-app', '@storybook/addon-actions', '@storybook/addon-links', ] }; ``` 可以直接在单个 stories 里使用，也可以在全局的配置 preview.js 里使用（应用到所有的 stories）。 ### addon-info 的使用 [https://github.com/storybookjs/storybook/tree/master/addons/info](https://github.com/storybookjs/storybook/tree/master/addons/info) *** addon-info 是较常用的一个插件，安装： ``` npm i -D @storybook/addon-info ``` or ``` yarn add @storybook/addon-info --dev ``` 其没有自带 types，需要另行安装： ``` npm install --save @types/storybook__addon-info ``` 使用 yarn 安装出现 node_sass 不匹配问题（Windows），主要是卡在 waiting 后报错。 ``` yarn global add node-gyp windows-build-tools ``` ### react-docgen 的使用 *** 其主要就是用于生成组件的属性表格。 storybook 自带，但是支持 TS 的话需要另外安装 loader： [https://github.com/strothj/react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) ``` $ npm install --save-dev react-docgen-typescript-loader or $ yarn add --dev react-docgen-typescript-loader ``` 需要配置 webpack： ``` const path = require('path') module.exports = ({ config }) => { config.module.rules.push({ test: /\.tsx?$/, use: [ { loader: require.resolve("babel-loader"), options: { presets: [require.resolve("babel-preset-react-app")] } }, { loader: require.resolve("react-docgen-typescript-loader"), options: { shouldExtractLiteralValuesFromEnum: true, tsconfigPath: path.resolve(__dirname, "../tsconfig.json"), propFilter: (prop) => { if (prop.parent) { return !prop.parent.fileName.includes('node_modules') } return true } } } ] }); config.resolve.extensions.push(".ts", ".tsx"); return config; }; ``` 有两个 bug 需要注意： [https://github.com/strothj/react-docgen-typescript-loader#limitations](https://github.com/strothj/react-docgen-typescript-loader#limitations) 1、When extending from React.Component as opposed to Component, docgens don't seem to be created. Ref issue #10 (thanks @StevenLangbroek for tracking down the cause). Doesn't work: ``` import React from 'react'; interface IProps { whatever?: string; }; export default class MyComponent extends React.Component<IProps> {} ``` Works: ``` import React, { Component } from 'react'; export default class MyComponent extends Component<IProps> {} ``` 就是说代码里使用`TS.Component`的形式都换成先 import 再使用。 <br/> 2、Export Names Component docgen information can not be generated for components that are only exported as default. You can work around the issue by exporting the component using a named export. ``` import * as React from "react"; interface ColorButtonProps { /** Buttons background color */ color: "blue" | "green"; } /** A button with a configurable background color. */ export const ColorButton: React.SFC<ColorButtonProps> = props => ( <button style={{ padding: 40, color: "#eee", backgroundColor: props.color, fontSize: "2rem", }} > {props.children} </button> ); export default ColorButton; ```