重塑 Storybook 的插件生态系统

Storybook 拥有 200 多个插件，可以启用新功能和集成。与 VSCode 扩展类似，插件是定制 Storybook 以适应您的 UI 开发工作流程的便捷方式。

插件生态系统是团队采用 Storybook 的主要原因之一。但直到现在，要找到适合您用例的插件，需要在 NPM 的深处探索。 我很高兴能在新插件目录（Beta 版）中重点介绍 Storybook 的最佳插件。

谁在使用插件，为什么？

Storybook 的插件 API 是其核心创新之一。它不仅允许用户以无数种方式扩展和配置 Storybook，而且许多插件无需修改即可自动跨框架（例如，可在 React、Vue、Angular 等中使用）。这意味着，如果您为 React 项目编写了一个插件，则可以在 60,000 多个公共 Storybook 中重复使用它。

“Storybook 是一个文档齐全的平台，让我们能够在短时间内构建出为用户带来价值的插件。”
– Contrast 公司的 Brendan Mahony YC18

得益于插件 API 的多功能性，插件数量激增。为了了解其可能性，让我们看看谁在使用插件以及原因。

大型组织

插件简化了在不同 Storybook 之间共享集成。大型公司使用它们来集成公司特定的库并推广 UI 规范。

Intuit 利用插件集中管理 UI 组件设计与开发文档。每位 UI 开发者都有用于组件文档和主题支持的标准化模板。

Naver，韩国排名第一的搜索引擎，创建了一个插件，用于在多个框架中预览组件代码。这使得轻松浏览 React、Vue 或 Angular 组件的文档成为可能。

领先的代理公司

插件简化了代理公司的 UI 开发交接。随着新项目的不断涌入，加快构建速度可以带来更满意的客户和更高的利润。

Whitespace 的 HTML 插件在一个插件面板中渲染组件的 HTML 输出。尽管它复制了开发者使用浏览器开发者工具已经做的事情，但这种小小的便利从长远来看可以节省大量时间。

“我们经常为拥有内部后端开发人员的科技公司工作。无需设置项目即可直接访问 HTML，这节省了时间。”——Fredrik，Whitespace 技术负责人

Etch 将开发者生产力提升到新的水平。他们的插件集成了Storybook 与 Bugherd并添加组件状态标签。

软件公司

插件帮助公司驾驭现代 UI 中无数的状态。这些公司的开发者必须应对故事和屏幕尺寸的组合爆炸。他们构建插件来对组件的边缘情况进行压力测试。

EatWith，自称美食界的 AirBnb，创建了一个插件，可以在多种视口宽度下同时预览组件。这确保了他们的 UI 在任何屏幕上都看起来很棒。

Splice，一个面向音频工程师和音乐家的声音库，制作了预览分支插件，帮助工程师快速切换功能分支。如果您曾想知道“那个组件在主分支上看起来如何？”，这个插件就是为您准备的。

独立开发者和灵活团队

Storybook 为插件作者承担了繁重的工作。通常，编写一个插件需要几个小时；如果您遵循我们的指南和文档，甚至更快。这使得人们可以快速与他们喜欢的工具集成并原型化新的工作流程。

Shota Fuji 最初创建了Figma 插件作为一个副项目，以加速他的代理公司的工作。今年，它的月下载量激增至 32 万+，并启发了 AdobeXD、Abstract 和 Zeplin 的插件。

与此同时，Alex Holachek 推出了Storybook Mobile，这是一个通过显示上下文提示来帮助开发者构建移动 Web UI 的插件。它是第一个用于移动 Web UI 的 Linter。

“移动 Web 浏览器占据了约 50% 的网站访问量，但许多移动 Web 最佳实践却常常被忽视。”

Contrast（YC18）发布了一个设计交接工作流程，突出了代码与 Figma 设计之间的差异——“UI 的拼写检查器”。开发者无需离开 Storybook 即可参考布局、间距、字体和颜色。

Paul Scanlon 构建了MDX Embed，这是一个用于将 Codepen、Egghead 和 GitHub 等富媒体嵌入到您的设计系统或组件文档中的插件。

如何编写插件

我们对来自 Shopify、Algolia 和 Godaddy 的开发者进行了调查，以了解他们如何使用插件。构建插件的主要障碍是文档不足。这是一个直接的解决方案：我们彻底修改了插件文档和学习材料。

📖 新插件文档详细介绍了编写插件所需的一切。它涵盖了 API、项目设置和用例。

🗺 “如何构建 Storybook 插件”是一个即将推出的教程，提供了构建插件的分步说明。现在即可阅读第一章。

在目录上线时获取通知

数千个团队使用插件来定制 Storybook。维护者Dominic Nguyen（我！）、Varun Vachhar、João Cardoso和Michael Shilman正在重塑插件生态系统，以便社区可以共享插件。这意味着每个 Storybook 用户都可以用更少的工作量交付更多 UI。

现在浏览插件目录 Beta 版。喜欢您看到的吗？在下面的 Twitter 上加入讨论。

您正在构建插件吗？我很乐意了解我们可以如何帮助您。请在Storybook 的 Discord中私信我 (@domyen)。