插件生态系统 2.0

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

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

社区已经创建了 200 多个公共插件。这个充满活力的生态系统使 Storybook 对每个人来说都更具生产力。

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

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

插件目录已结束 beta 测试

通过 Storybook 新的插件目录，为您的项目找到合适的插件变得很简单。

该目录在一个地方自动索引所有插件。它会突出显示最受欢迎和最热门的插件。它还按关键字和标签组织插件，以帮助查找特定任务的有用工具。

单击插件即可查看其自述文件、安装说明和相关元数据。这样您在将插件添加到 Storybook 之前就能对其质量充满信心。

在后台，我们根据维护元数据不断抓取、索引和对插件进行排名。这可以帮助您尽快找到社区最新、最优秀的成果。

万能插件

插件是扩展 Storybook 的一种简单方法。API 处理了复杂性，因此您可以专注于插件的独特功能。通常，引导一个可用的插件大约需要 2 小时。

例如，Alex Holachek 快速原型设计了一个新的移动 UX linter。而 Shota Fuji 则利用业余时间构建了Figma 插件——该插件每月下载量已超过 32 万次。Alex Reardon 发明了一种评估组件渲染性能的新方法。

得益于我们的社区，插件生态系统正在蓬勃发展。自 beta 版发布以来，我们平均每周都有新的插件被全球团队和独立开发者创造出来。即使是像Contrast (YC18) 这样的风险投资公司也在为 Storybook 发布工具。

为了了解可能的情况，让我们仔细看看最有前途的插件。

应用模拟

开发者在 Storybook 中构建从组件到页面的所有内容。过去，将应用 UI 调整到特定状态需要付出很多努力。您需要填充数据库、配置虚拟用户帐户、本地运行整个应用程序，然后导航到相关页面。

借助 Storybook，您可以在不运行应用程序的情况下独立开发应用 UI。当您将页面排列保存为 story 时，可以随时轻松地跳回到该确切的排列。

Apollo GraphQL 是一个广泛使用的 GraphQL 库。该插件在页面级别模拟 GraphQL 数据以进行测试。它被创建的目的是“观察功能更改如何影响页面，并通过 Chromatic 自动化视觉测试”。

Mock Service Worker (MSW) 使用服务工作线程，通过在网络级别拦截请求并提供模拟数据作为响应来模拟 API 请求。该插件简化了在 story 中模拟 API 请求的操作。

Axios 是一个通用的 HTTP 请求和响应库。该插件可视化您的组件与后端或模拟 API 之间交换的 HTTP 数据。

UI 测试

每当您编写 story 时，您都会免费获得测试。毕竟，story 在给定固定的一组 props 和数据的情况下，捕获了 UI 组件的渲染状态。根据 2020 年 JavaScript 现状调查，Storybook 是第三常用的测试工具。

Component Story Format 的创建是为了让您可以在测试中重用您的 story。这样，您无需额外工作即可解锁更多测试方式。

Chromatic 是由 Storybook 团队制作的视觉测试服务。该插件将您的 story 变成视觉回归测试，在您每次推送代码时运行。这有助于您在开发过程中检测 UI 错误。

Accessibility 插件验证您的组件是否符合可访问性标准。它通过在开发过程中突出显示需要改进的区域来帮助您进行可访问性质量保证。

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 插件允许您使用 Next Router 在 Storybook 中模拟路由和页面。

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

Emotion 和 styled-components 允许您在 JavaScript 中编写 CSS。 styled-components 插件和 Emotion 插件将主题选择器添加到 Storybook 的 UI 中，以便您可以在公司支持的主题之间切换。

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

构建您自己的插件

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

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

🗺 “如何构建 Storybook 插件”将通过代码示例引导您从头开始构建插件。

🗺 “如何将插件发布到目录”分享了如何将您的插件列入目录。

结论

根据 2020 年 JavaScript 现状调查，已有 42% 的 JavaScript 开发者使用 Storybook。动态生态系统是原因之一。当您采用 Storybook 时，您还将获得一个庞大的插件网络，这些插件可以赋予您超能力，从集成框架到自动化开发工作流。

Addon ecosystem 2.0 由 Dominic Nguyen（我！）设计。Varun Vachhar 贡献了前端和指南。João Cardoso 撰写了文档。Michael Shilman 策划了目录并创建了其后端。

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