创建 Storybook 插件

每个团队交付 UI 的方式都不同。工作流程千变万化，从工具到技术栈再到测试策略都各不相同。 Storybook 非常灵活，这意味着您可以使其适应任何流程。

插件是自定义 Storybook 以适应您的工作流程的便捷方式。社区使用插件来自动化繁琐的工作、集成库和创造新的协作方式。我们创建了一个插件工具包和深入指南，以帮助您为自己构建插件。

为什么要构建插件？

Storybook 的可扩展架构为构建自定义工作流程奠定了基础。您可以解决自己的痛点，改进笨拙的集成。或者自动化每个人都讨厌做的繁琐任务。让我们看几个例子。

• Figma 插件（每月 40 万次 npm 下载）由 Shota Fuji 开发，将设计嵌入组件实现旁边。它加快了 UI 构建速度，并使其数字机构能够交付更多工作。
• Storybook Mobile 由 Alex Holachek 开发，用于评估组件是否符合移动 Web 最佳实践。它是同类产品中的第一个移动 linter。
• HTML 插件 由 Whitespace 开发，显示每个 story 的编译 HTML，使后端开发人员可以轻松访问共享 UI。
• Atlassian 构建了 Performance 插件，用于调试 React 组件中的性能问题。

开始使用

所以您已经有一些想法，并且想构建自己的插件？我们收集了一堆有用的资源来帮助您入门

• 插件 API 文档提供指南、代码示例，当然还有 API 参考。
• 创建插件指南是一个全面的动手教程，它将引导您完成构建 Outline 插件的过程。
• 插件工具包提供了一个样板，可让您快速启动并运行。

您还可以探索开源插件，例如 Pseudo States、Dark Mode 和 其他官方插件。它们是您学习的真实示例。

Storybook 插件工具包

当您只想开始编码时，却要花费时间引导项目，这令人沮丧。我们理解您。 深入构建您的插件，而无需处理配置，因此我们整理了一个 插件工具包。它提供了您入门所需的一切

• 📝 开发模式下的实时编辑
• ⚛️ 用于 UI 的 React/JSX 支持
• 📦 使用 Babel 进行转译和打包
• 🏷️ 插件元数据
• 🚢 使用 Auto 进行发布管理

使用它立即引导新插件！

创建插件指南

我整理了一份深入指南，向您展示如何创建插件。跟随我们一起编写 Outline 插件 - 用于可视化调试 CSS 布局和对齐。它添加了一个工具栏按钮，可以概述所有 UI 元素，从而可以轻松地一目了然地验证定位和放置。

在此过程中，您将了解 Storybook 的内部工作原理和插件 API，并发布您的第一个插件。

结论

Storybook 的可扩展架构允许您自定义它、自动化工作流程以及与您喜欢的工具集成。插件在此中起着关键作用。事实上，Storybook 的大多数核心功能都是作为插件实现的。例如：文档、可访问性测试和交互式控件等等。

Storybook 的插件 API 提供了实用程序和帮助程序，可帮助您快速构建插件。更重要的是，您可以通过插件目录与成千上万的开发人员共享这些插件。

现在，开始使用，我们迫不及待想看看您创造出什么！