storybook插件说明： integrations与addons推荐

官方的：

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