改进 Storybook 的插件生态系统

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

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

谁在使用插件以及为什么？

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

“Storybook 是一个文档完善的平台，让我们可以在短时间内构建一个插件，为我们的用户释放价值。”
– Brendan Mahony，Contrast，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，一个面向音频工程师和音乐家的声音目录，制作了 preview-branch 插件，该插件可帮助工程师快速在功能分支之间切换。如果您曾经想知道“该组件在 master 分支上是什么样子？”，那么这个插件适合您。

独立开发者和敏捷团队

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)。