本文已参与「新人创作礼」活动，一起开启掘金创作之路。
开发了一个组件库，想要对外展示下，又不想自己写复杂的文档，可以使用一些组件库文档框架。 开发好组件库后简单处理下就可以生成在线文档啦～
对比下当前比较流行的一些组件
- storybook
- docz
- bit
- styleguidist
- Docgen
| 对比 | storybook | docz | bit | styleguidist | Docgen |
|---|---|---|---|---|---|
| github star | 50 | 18.9 | 11.4 | 8.9 | 2.7 |
| 文档 | 很多较详细 | 详细，需要的都有 | 超全 | 较详细，但是文档页不好用 | 不详细 |
| 支持语言 | react、vue、angular等 | react | react、vue、angular等 | vue、react | react |
| 模版语言 | js/ts/tsx | mdx、md | -- | md | js等提取成json |
| 学习成本 | 较高 | 较低 | 很高 | 一般 | 较低 |
| 默认样式 | 比较好看 | 一般 | 好看 | 丑 | 丑 |
| 自定义主题 | 简单支持 | 支持 | -- | 不支持 | 不支持 |
| 优点 | 1. 默认主题好看，支持简单主题配置2.文档社区很全3.支持多语言，支持多配置4. 可搭配插件自根据注释自动生成参数 | 1. 零配置快速接入，热加载和支持个性化设置2.引入了mdx语法作为框架的文档入口，让文档接入更加灵活3.接口展示形式可以随意自定义4. 好维护 | 1.辅助团队协同开发，可视化组件开发与测试过程，生成组件文档2. 可以在任何规模的项目和应用程序之间共享和管理组件3. 0重构隔离现有项目中的组件4. 主要用于完成的团队协作、库发布维护流程，共享开发 | 1. 相对轻型，支持热加载的组件文档化工具，通过读取所有的Component.md文档，渲染每个组件的展示页。2. 可以扫描组件代码，自动根据propTypes和方法注释、doclet tags等生成属性表格。3. md语法，实用型更强 | 简单，从react代码中提取信息，返回json文档 |
| 缺点 | 1. 上手较难，配置较多，文档不好查找2. 文档参数展现形式自定义化不足 3. 后期如果想换别的框架不好迁移 | 1. 提取组件入参不方便2. 组件展现形式需要自定义 | 1. 使用成本太高了2.功能繁多，太浪费 | 1. 对命名和路径依赖性强2.个人感觉很不好用，在已有项目中配置较麻烦3. 对组件开发格式又要求 | 需要额外的建站开发量 |
\
