使用create-react-app 开发的组件的痛点：

• 入口文件不适合管理组件库
• 缺少行为追踪和属性调试功能

但是Storybook 可以帮我们解决这些痛点。

1、介绍

Storybook 官网地址：地址
优点：

• 分开展示各个组件不同属性下的状态
• 该工具适用于react、vue、angualar等
• 能追踪组件的行为并且具有属性调试功能
• 可以为组件自动生成文档和属性列表
  

2、安装

进去官方文档选择你使用的框架，这边列举react的安装方式

 npx sb init

在安装过程中，Storybook将调查项目的依赖项，并为您提供最佳配置。
运行：npm run storybook
在安装完之后，你项目中会多几个文件，分别是.storybook文件夹，src文件夹下的storires等

3、Storybook 支持Typescript

由于我的组件都是Typescript 写的，但是Storybook的代码都是js，所以我想Storybook支持Typescript的写法。官方文档有一章专门讲解Typescript配置的。地址：链接地址

在文件夹.storybook下的main.js里加入这一段话：

module.exports = {
    "stories": [
        "../src/styles/index.scss",
        "../src/**/*.stories.mdx",
        "../src/components/*/*.stories.@(js|jsx|ts|tsx)"
    ],
    "addons": [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/preset-create-react-app"
    ],
    typescript: {
        reactDocgen: 'react-docgen-typescript',
        reactDocgenTypescriptOptions: {
            compilerOptions: {
                allowSyntheticDefaultImports: false,
                esModuleInterop: false,
            },
        }
    }
}

注意有两种配置，你可以仔细的看文档，配置完后重新运行就可以使用Typescript了。

4、使用

此时运行项目，storybook给你的例子是写在stories文件夹下的，但是由于我想把组件写在components文件夹下，stories文件也和组件同一级，这样方便查看，目录结构如下

所以我得在.storybook文件夹下的main.js所如下配置，主要是更改stories引入目录地址改成components，还有引入css文件
如下图：

这样子就能在components文件夹下写我们的组件了。

例如我想写一个button组件，只要在原有的Button文件夹下创建一个文件名为button.stories.tsx的文件，代码如下：

import React from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';
import { Button, ButtonType, ButtonSize, ButtonProps } from './button'

// 这是组件的标题
export default {
    title: 'Button 组件',
    component: Button
} as Meta;

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

// 这是Primary 类型的组件
export const Primary = Template.bind({});
Primary.args = {
    btnType: ButtonType.Primary,
    children: 'Primary'
};

// 这是Large Primary类型的组件
export const LargePrimary = Template.bind({});
LargePrimary.args = {
    btnType: ButtonType.Primary,
    children: 'Large Primary',
    size: ButtonSize.Large
};

然后运行项目 ：npm run storybook
就可以看到如下界面：

点击组件视图左上角有一个Docs，可以查看当前类型组件的属性

是不是非常方便，然后你就可以写出一个非常明了的组件库了。