官方的：
https://storybook.js.org/integrations/
https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md
我所推荐的的三个：
yarn add -D @storybook/addon-docs @storybook/addon-design-assets @storybook/addon-storysource
Storybook Storysource Addon
https://github.com/storybookjs/storybook/tree/next/code/addons/storysource
查看 Storybook story 源码
Storybook addon for design assets
查看设计原图
https://github.com/storybookjs/addon-design-assets
如果是sketch设计稿，直接使用：https://storybook.js.org/addons/storybook-addon-sketch/
Storybook Docs
https://github.com/storybookjs/storybook/tree/next/code/addons/docs
文档增强
storybook插件
- 官网插件knobs,actions,source,docs,viewport,storyshots,backgrounds,accesssibility,console,links
- 一般安装完，官方默认给配了actions,插件和links插件
actions插件
- 有actions，就会有个控制台一样的面板，有点像jest的mockfn一样，触发组件操作可以通过它提供的函数打印到面板上。
- actions插件文档。
links插件
- 这个插件比较常用，可以在不同story间进行跳转，可以当是个a链接用。
- links插件文档。
knobs插件
- 这个插件厉害了，主要是用来生成变量，并可以进行在线切换用的。比如最简单的切换文字。很多组件上面都有文字，那么文字可能有长有短，就可以使用这个插件设定一个长的文字和一个短的文字，预览时可以切换。
- 另外还有很多强大功能。甚至可以代替background插件改变背景颜色。
- knobs效果在线预览
- knobs插件文档
console插件
- 需要借助于action插件来输出，为啥要用这个插件说明上写了，说可能有些情况要。。。反正我有点没理解。
- addon-console预览界面
- addon-console插件文档
source插件
- 直接显示storybook上写的代码是哪一行写的。预览可以看上一个console的预览。
- source插件文档
docs插件
- docs插件就不用说了吧，支持mdx，就是最后可以展示给不懂行的人看的文档。
- 我自己写了个组件库玩，还没写完，很多高级功能都没用，感觉这些功能比较适合团队开发，我一个人当然图快，主要就是靠docs插件做文档，同时部署静态网站到githubpage。我的组件库在线预览。
- docs插件文档
viewport插件
- 这个插件可以对tab页新增个选项，跟chrome里的切换不同设备有点像，使用这个功能，就可以把一个组件放入不同设备大小的story里。
- viewport插件文档。
background插件
- 可以设置story的背景颜色之类，当然也有些简单方法可以不需要background插件就能设置背景。
- background插件文档。
accesssibility插件
- 又叫a11y插件，有点相当于组件级别的lint，可以自动检验组件是否符合某些规范。一般是用来检查视障人士能不能分辨之类的。基于axe搞的。
- 效果预览地址。
- a11y插件文档
storyshots插件
- 这个插件官网写的让人有点晕，实际还分成2个插件，都是jest相关。
- 主要插件是storyshots，它可以把jest运行结果置于底部控制台页上，介绍说还可以拿到旧代码快照什么的，有点没懂怎么搞。
- 另一个插件是storyshots-puppeteer，基于上面那个，pupeteer就有点像selenium一样开个虚拟浏览器去做测试。
- storyshots插件文档
- puppeteer插件文档
好用的社区插件
- 官方插件就上面那些，有些社区插件写的也很不错，可以看看。
storybook-mobile插件
- 可以给你的移动端网站用户体验上自动提供建议。
- 这个功能相当6啊，对于移动开发经验不足的人有很多帮助。
- 插件使用后在线预览地址
- 插件文档地址
storybook-design-token插件
- 这个插件我个人觉得适合比较大的项目，我们写样式往往要制作多个变量，比如antd那个样式文件，定义了很多很多变量，还有动画之类的，但人脑肯定记不过来，就算记得了也可能记不得它是什么效果。有了这个插件，就可以把变量和效果全部展示出来。在开发过程中提供帮助。
- 插件文档地址
- 作者设计思想
- 在线预览地址
Apollo Storybook Decorator插件
- 用于制作模拟graphql的插件，相当于可以模拟个假graphql传来的数据进行展示与调试。
- 插件文档地址
storybook-graphql-kit 插件
- 也是graphql的一套工具，可以在线修改数据之类。
- 插件文档地址
Readme 插件
- 这个功能有点对标了docs插件，感觉适合纯内部分享使用，它可以对每个story做一个文档说明，并且功能和docs差不多，就是docs是在tab页并且可以独立输出，这个是在addons界面，并且不是默认展现，每个都需要点一下看见。
- 效果在线预览
- 插件文档地址
storybook-addon-versions 插件
- 这个插件不支持storybook5，有段时间没维护了，就说一下功能吧，就是可以通过配置版本号实现各个版本的组件库中穿梭。比如我1.0.0的button是一个样子，1.0.1的button是另一个样子，那么就可以来回切换看。
story2sketch 插件
- 很多设计师会用sketch软件，这个工具可以把storybook的文件导出，导入给sketch使用。不过这个只支持5以下，storybook6本身就可以自己导出给sketch了。
- 插件文档地址
jsx插件
- 这个插件感觉有点对标source，或者是docs部分功能。可以显示story中jsx怎么写的。
- 插件文档地址
storybook-addon-react-live-edit 插件
- 在线实时编辑，感觉这个功能有点对标knobs。
- 插件文档地址
i18n 插件
- 全局国际化用。
- 插件文档地址。
storybook-host 插件
- 这个插件可以设定故事iframe设定些属性。
- 插件文档地址
Specifications Addon 插件
- 这个插件可以用来整合一些测试工具到storybook上，有点类似storyshots插件
Storycap 插件
- 这个插件名字起的挺好啊，用途就是通过puppeteers来对每个故事截图，然后生成到文件夹里。
- 插件文档地址
storybook-addon-responsive-views 插件
- 响应式布局一次头全预览！不过感觉加了viewport然后使用docs插件也能做到。
- 插件文档地址
Storybook Playroom Addon 插件
- 可以同时浏览在不同分辨率下的效果。
- 插件效果在线浏览
- 插件文档地址
storybook-addon-theme-playground 插件
- 可以对每个story设置主题，有点像做好参数的knob。
- 在线预览地址
- 插件文档地址
转载本站文章《storybook插件说明： integrations与addons推荐》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/storybook/8896.html
