# 開發組件庫時的問題 - 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; ```