官方的:
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一样,触发组件操作可以通过它提供的函数打印到面板上。
links插件
-
这个插件比较常用,可以在不同story间进行跳转,可以当是个a链接用。
knobs插件
-
这个插件厉害了,主要是用来生成变量,并可以进行在线切换用的。比如最简单的切换文字。很多组件上面都有文字,那么文字可能有长有短,就可以使用这个插件设定一个长的文字和一个短的文字,预览时可以切换。
-
另外还有很多强大功能。甚至可以代替background插件改变背景颜色。
console插件
-
需要借助于action插件来输出,为啥要用这个插件说明上写了,说可能有些情况要。。。反正我有点没理解。
source插件
-
直接显示storybook上写的代码是哪一行写的。预览可以看上一个console的预览。
docs插件
-
docs插件就不用说了吧,支持mdx,就是最后可以展示给不懂行的人看的文档。
-
我自己写了个组件库玩,还没写完,很多高级功能都没用,感觉这些功能比较适合团队开发,我一个人当然图快,主要就是靠docs插件做文档,同时部署静态网站到githubpage。我的组件库在线预览。
viewport插件
-
这个插件可以对tab页新增个选项,跟chrome里的切换不同设备有点像,使用这个功能,就可以把一个组件放入不同设备大小的story里。
background插件
-
可以设置story的背景颜色之类,当然也有些简单方法可以不需要background插件就能设置背景。
accesssibility插件
storyshots插件
-
这个插件官网写的让人有点晕,实际还分成2个插件,都是jest相关。
-
主要插件是storyshots,它可以把jest运行结果置于底部控制台页上,介绍说还可以拿到旧代码快照什么的,有点没懂怎么搞。
-
另一个插件是storyshots-puppeteer,基于上面那个,pupeteer就有点像selenium一样开个虚拟浏览器去做测试。
好用的社区插件
-
官方插件就上面那些,有些社区插件写的也很不错,可以看看。
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 插件
转载本站文章《storybook插件说明: integrations与addons推荐》,
请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/storybook/8896.html