创建 Storybook 插件

每个团队交付 UI 的方式都不同。从工具、技术栈到测试策略，工作流程千差万别。Storybook 非常灵活，这意味着你可以将其适应任何流程。

插件是自定义 Storybook 以适应你工作流程的便捷方式。社区使用插件来自动化繁琐的工作、集成库以及发明新的协作方式。我们创建了一个 Addon Kit 和深度指南来帮助你构建自己的插件。

为什么构建一个插件？

Storybook 的可扩展架构为构建自定义工作流程提供了基础。你可以解决自己的痛点来改进一个棘手的集成。或者自动化所有人都讨厌做的繁琐任务。让我们看几个例子。

• Figma 插件（每月 npm 下载量达 40 万次）由 Shota Fuji 开发，它将设计稿嵌入到组件实现旁边。这使得 UI 构建更快，并让他的数字代理机构能够交付更多工作。
• Storybook Mobile 由 Alex Holachek 开发，用于根据移动网页最佳实践评估组件。它是首个此类移动端 linter。
• HTML 插件 由 Whitespace 开发，它显示每个 story 编译后的 HTML，使后端开发者能够轻松访问共享的 UI。
• Atlassian 构建了 Performance 插件，用于调试 React 组件的性能问题。

入门

那么你已经有一些想法并且想构建自己的插件了吗？我们收集了一些有用的资源来帮助你入门。

• 插件 API 文档 提供了指南、代码示例，当然还有 API 参考。
• 创建插件指南 是一个全面且实用的教程，它将引导你构建 Outline 插件。
• Addon Kit 提供了一个样板代码，可以帮助你快速启动和运行。

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

Storybook Addon Kit

当你只想开始编码时，花费时间来引导项目是很令人沮丧的。我们理解你。无需处理配置，即可投入构建你的插件，因此我们准备了 Addon Kit。它提供了你入门所需的一切。

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

使用它可以立即引导一个新插件！

创建插件指南

我整理了一份深度指南，向你展示如何创建一个插件。跟随我们一起编写 Outline 插件——它用于视觉调试 CSS 布局和对齐。它添加了一个工具栏按钮，可以为所有 UI 元素添加轮廓线，从而方便地一眼检查定位和放置。

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

结论

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

Storybook 的插件 API 提供了实用工具和助手，可以帮助你快速构建插件。更重要的是，你可以通过插件目录与成千上万的开发者分享这些插件。

现在，开始吧，我们迫不及待想看看你会创造出什么！