介绍
@panosvoudouris/storybook-addon-blabbr 是一个 Storybook 的插件，它可以让你在编写组件时，快速提交带有评论的屏幕截图到 Blabbr.app，方便你和你的团队沟通和讨论。
本文将向你介绍如何使用这个插件，以及如何与 Blabbr.app 集成。
安装
首先，你需要将该包安装在你的项目中。如果你使用的是 npm：
npm i -D @panosvoudouris/storybook-addon-blabbr
如果你使用的是 yarn：
yarn add -D @panosvoudouris/storybook-addon-blabbr
配置
在你的 Storybook 配置文件中，你需要在 addons 数组中添加 @panosvoudouris/storybook-addon-blabbr，如下所示：
module.exports = {
addons: [
// ...
'@panosvoudouris/storybook-addon-blabbr',
],
// ...
};使用
在你的组件文档页面中，你可以看到一个新的 Blabbr 图标。点击它，就会在 Blabbr.app 中打开并上传当前组件的屏幕截图，并允许你添加评论。
集成
默认情况下，插件将上传静态屏幕截图，但你也可以配置它以上传交互性截图或 GIF 图像。
要上传交互型截图或 GIF 图像，你可以使用 react-gif-maker等 React 库实现，并将生成的文件传递给插件的 options 配置。
例如，如果你的交互性组件在 Storybook 中被渲染到 canvas 中，那么你可以使用 canvas-to-blob 库将其转换为 Blob 对象，并将该对象传递给插件的 options 中。
示例代码：
-- -------------------- ---- -------
------ - ------ - ---- --------------------
------ ------------ ---- -----------------
------ ------------------ ---- -----------------------
----- ------- - -
----- ------------
--------------- --
---------------- ---
--
----- -------------- - ----- ----- ----- -- -
----- ------------------
----- ----
---
--
----- --------------------- - -- ------- -- -- -
--------
---------
------------------- ------------------- -- --------------------- --
---------
--
------ ------- -
------ ------------- -----------
---------- ----------------------
----------- -
------- --------
--
--在此示例中，当用户点击 RecordScreenButton 时，组件会生成一个 GIF，并将其传递到 onGifCompleted 回调中。这个回调会上传文件到 Blabbr.app。
结论
使用 @panosvoudouris/storybook-addon-blabbr，你可以方便快捷地与团队成员讨论你的组件，并通过集成 GIF 以便更直观地演示你的组件，从而使你的组件更容易理解和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005602881e8991b448de580