插件生态系统 2.0

Storybook 是 UI 组件开发的行业标准。

Storybook 如此受欢迎的主要原因之一是其可定制性。通过 Storybook 的插件 API，开发者可以添加新功能、自动化工作流程并与他们喜欢的库集成。更重要的是，他们可以将这些插件作为可复用包分享给社区。

社区已经创建了超过 200 个公共插件。这个充满活力的生态系统让 Storybook 对每个人都更高效。

现在，我们很高兴将 Storybook 插件生态系统提升到新的水平。生态系统 2.0 包括

• 🧩 集中式插件目录
• 📕 深入教程
• 📐 全面文档

插件目录脱离 Beta

借助 Storybook 的新插件目录，为你的项目找到合适的插件变得简单了。

目录自动索引所有插件并集中展示。它突出显示最受欢迎和趋势插件。它还按关键词和标签组织插件，以帮助找到特定任务的有用工具。

点击一个插件可以查看其 readme、安装说明和相关元数据。这让你在将插件添加到 Storybook 之前对其质量有信心。

在幕后，我们根据维护元数据持续爬取、索引和排名插件。这有助于你在社区发布最新和最棒的插件后立即找到它们。

插件包罗万象

插件是扩展 Storybook 的直接方式。API 处理了复杂性，因此你可以专注于插件的独特功能。通常，启动一个可用插件大约需要 2 小时。

例如，Alex Holachek 快速原型化了一个新的Mobile UX linter。Shota Fuji 在业余时间构建了Figma 插件——它现在每月下载量已超过 32 万次。Alex Reardon 发明了一种评估组件渲染性能的新方法。

得益于我们的社区，插件生态系统正在蓬勃发展。自 Beta 发布以来，我们看到全球团队和个人开发者平均每周都会创建一个新插件。甚至像Contrast (YC18) 这样的风险投资支持的公司也在为 Storybook 发布工具。

为了了解可能性，我们来仔细看看最有前途的插件。

应用模拟

开发者在 Storybook 中构建从组件到页面的所有内容。过去，将你的应用 UI 置于特定状态需要付出大量努力。你必须初始化数据库、配置虚假用户账户、在本地运行整个应用并导航到相关页面。

使用 Storybook，你可以在隔离环境中开发应用 UI，完全无需运行应用。当你将页面排列保存为 story 时，随时都可以轻松跳回该精确排列。以下插件可帮助你在应用 UI 中模拟数据和状态。

Apollo GraphQL 是一个广泛使用的 GraphQL 库。该插件在页面级别模拟 GraphQL 数据用于测试。它被创建出来是为了“查看功能更改如何影响页面并使用 Chromatic 自动化可视化测试”。

Mock Service Worker (MSW) 使用 Service Worker 通过在网络层面拦截请求并在响应中提供模拟数据来模拟 API 请求。该插件简化了在你的故事中模拟 API 请求。

Axios 是一个无处不在的 HTTP 请求和响应库。该插件可视化了你的组件与后端或模拟 API 之间交换的 HTTP 数据。

测试 UI

每当你编写 stories，你就免费获得了测试。毕竟，stories 捕获了给定固定 props 和数据集合的 UI 组件的渲染状态。根据 State of JavaScript 2020 调查，Storybook 是第三大最常用的测试工具。

创建 Component Story Format 是为了让你可以在测试中复用你的 stories。这解锁了更多测试方式，而你无需额外工作。

Chromatic 是 Storybook 团队开发的可视化测试服务。该插件将你的 stories 转化为可视化回归测试，并在你推送代码时运行。这有助于你在开发过程中检测 UI 错误。

Accessibility 插件验证你的组件是否符合可访问性标准。它在你开发过程中通过高亮显示需要改进的区域来帮助你进行可访问性 QA。

Jest 插件在 Storybook 面板中显示 Jest 单元测试的输出。这是在你构建 UI 组件时获得测试即时反馈的有用方法。

设计工具

设计插件通过在 Storybook 中嵌入设计制品来简化开发流程。它们将设计交付物与真实的 UI 实现连接起来，以便你的团队能够更快地构建 UI。

对开发者的好处是巨大的。你节省了时间，因为无需在开发工具和设计工具之间来回切换。通过持续记录设计内容与实际构建内容之间的差异，你可以减少歧义。

Zeplin 是一个发布最终设计的设计工作区。它从 Adobe XD、Figma 和 Sketch 文件中提取资产、颜色和尺寸等元数据，为你节省时间。该插件将最终设计显示在实时 UI 组件旁边，方便参考。

Figma 是一个协作式 UI 设计工具，允许多人在浏览器中同时进行设计。Figma 插件将组件设计显示在实现旁边。设计更改会在 Storybook 中即时更新。

Contrast 是一个开发者交付工具 - 专为 Figma 加强。该插件自动告诉你你的代码与设计之间的差异。它就像 UI 的拼写检查器。

Abstract 是一个用于 Sketch 和 Adobe XD 文件的版本控制工具。可以想象成设计师的 Git。该插件在 Storybook 插件面板中展示 Sketch 设计。开发者可以在 Storybook 中方便地测量距离、导出图像和采样颜色。

与流行库的集成

Storybook 的灵活性使其易于与流行库一起使用。虽然可以手动配置 Storybook 以适应任何技术栈，但插件通过提供“最佳实践”的开箱即用集成来简化配置。

Next.js 是一个领先的 React 应用框架。Next Router 插件允许你在 Storybook 中使用 Next 路由器来模拟路由和页面。

Formik 是一个流行的表单库。Formik 插件为渲染的组件提供 Formik 上下文，并在插件面板中展示表单的状态。

Emotion 和 styled-components 允许你在 JavaScript 中编写 CSS。styled-components 插件和 Emotion 插件为 Storybook 的 UI 添加了主题选择器，这样你就可以在公司支持的主题之间切换。

MDX 结合了 Markdown 和 JSX。它简化了开发者文档的编写。借助 MDX embed 插件，你可以轻松地将流行网站嵌入到你的文档中。它支持 Youtube、CodePen、CodeSandbox、Egghead、GitHub、Twitter 等等。

构建你自己的插件

对插件有想法？从我们的指南和 API 文档开始吧。

📖 插件文档向你展示了编写插件所需的一切，从 API 到项目设置。

🗺 《如何构建 Storybook 插件》通过代码示例逐步引导你从零开始构建一个插件。

🗺 《如何将插件发布到目录》分享了如何在目录中列出你的插件。

结论

42% 的 JavaScript 开发者已经在使用 Storybook。其动态的生态系统是其受欢迎的主要原因之一。当你采用 Storybook 时，你还会获得一个庞大的插件网络，这些插件为你提供了从集成框架到自动化开发工作流程的超能力。

插件生态系统 2.0 由 Dominic Nguyen（即我！）设计。Varun Vachhar 贡献了前端和指南。João Cardoso 编写了文档。Michael Shilman 负责目录的规范和后端开发。

立即查看插件目录。在下面的 Twitter 上加入讨论。