插件生态系统 2.0

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

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

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

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

• 🧩 中心化的插件目录
• 📕 深入的教程
• 📐 全面的文档

插件目录 Beta 版结束

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

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

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

在幕后，我们不断地抓取、索引和排名插件，基于维护元数据。这有助于你尽快找到来自社区的最新和最棒的插件。

插件可以应有尽有

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

例如，Alex Holachek 快速原型设计了一个新的 移动 UX 代码检查器。而 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 workers 通过在网络级别拦截请求并在响应中提供模拟数据来模拟 API 请求。该插件 简化了在你的 stories 中模拟 API 请求的过程。

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

测试 UI

每当你编写 stories 时，你都会免费获得测试。毕竟，stories 捕获了在给定一组 props 和数据的情况下 UI 组件的渲染状态。根据 2020 年 JavaScript 状态调查，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 插件 允许你使用 Next 路由器在 Storybook 中模拟路由和页面。

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 上的讨论。