CRA + react-styleguidist + antd 创建组件库（一）

每个公司业务不同，对于前端开发来说，不可避免的要对现有的市面上主流的UI库进行二次封装开发，但如果每个项目都封装一遍，或者每次都从其中一个项目将封装的组件copy 到另一个项目，实在很不方便，而且不能统一管理，所以想到了自己做一个组件库。让我们一步一步开始探索吧。

选择react + antd design的组合，采用react-styleguidist来编写组件文档，没有组件说明文档对于使用者来说简直太痛苦，这也是我想写自己的组件库的一个原因。

1. create-react-app，安装antd

npx create-react-app my-library --template typescript
npm intall antd

2. 安装react-styleguidist，并在package.json增加启动的命令

npm install --save-dev react-styleguidist

 3. 好了，我们启动试试看 npm run styleguide， react-styleguidist的启动需要依赖webpack，所以我们可以看到启动时，react-styleguidist会自动加载CRA封装好的webpack配置。

 我们去访问http://localhost:6060/看看，得到了这个页面

 react-styleguidist 已经启动成功了，但是没找到components，根据官方文档，react-styleguidist会默认查找 src/components/**/*.{js,jsx,ts,tsx}下的文件，我们还没创建呢

4. 在src下创建components文件夹，当然也可以创建任何你想要的路径，这就需要创建styleguide.config.js文件配置components参数，各种具体配置参数可以参考官方文档，

Configuration | React Styleguidist (react-styleguidist.js.org)https://react-styleguidist.js.org/docs/configuration在这里我创建了默认路径，我们先封装一个Button组件。具体封装的写法之后我会总结一下，再写一篇文章的。

 我们再启动一下试试看。成功了！但是把*props.ts文件也识别为组件了，并且没有将props的参数列表展示出来，这就需要修改react-styleguidist的配置文件了。

5. 在项目根目录下新建styleguide.config.js

首先添加components 属性，只识别.tsx文件为component

再引入react-docgen-typescript，将props.ts中的参数正确显示在文档中

module.exports = {
  components: 'src/components/**/*.tsx',
  propsParser: require('react-docgen-typescript').withCustomConfig(
    './tsconfig.json'
  ).parse
}

配置完成后，再次尝试启动，很遗憾还是没能正确将文档显示出来。

于是查看 react-styleguidist文档及代码，看了官网中CRA的例子，发现react-scripts和react-styleguidist的版本，不是最新的，但现在我们用的版本都是最新的，想到react-styleguidist加载的是react-scripts的webpack.config.js，有可能是版本的问题，于是按照例子中的版本重新安装。将react-scripts的版本从5.0.1降到3.2.0，将react-styleguidist的版本从13.1.1降到9.1.6。再次启动，成功了！但具体原因还没分析出来，等分析出来再和大家分享，有过研究的小伙伴也可以评论哦。