重塑 Storybook 的插件生态系统

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

插件生态系统是团队采用 Storybook 的主要原因之一。但到目前为止，要找到适合您用例的插件，还需要深入 NPM 搜索。我很激动地在新的插件目录（测试版）中重点介绍 Storybook 的最佳插件。

谁在使用插件，为什么？

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

“Storybook 是一个文档完善的平台，使我们能够快速构建一个插件，为我们的用户带来价值。”
– Brendan Mahony at 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 插件作为一个副项目，以加快他的代理机构的工作速度。今年，它的月下载量达到了 320,000 多次，并启发了 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。

立即浏览 插件目录测试版。喜欢您看到的内容吗？在下面的 Twitter 上加入讨论。

您正在构建插件吗？我很想了解我们如何帮助您。在 Storybook 的 Discord 中直接给我（@domyen）发消息。