插件目录抢先看

自动化和扩展 Storybook

Dominic Nguyen

Dec 02, 2020 — @domyen

最后更新 Jan 07, 2025

插件是 Storybook 受欢迎的重要原因。社区拥有超过 200 个插件，可以扩展你的 UI 开发工作流程。但是，使用插件可能有些棘手。

很难弄清楚如何创建插件，更不用说与他人分享了。大多数插件由有抱负的开发者或像 Ticketmaster、Rakuten 和 eBay 这样的专业团队创建。

这就是为什么我很高兴向大家抢先展示 Storybook 全新的插件目录应用和深入指南。我们正在让插件的创建、查找和重用变得更加容易。

什么是插件？

在我们开始之前，先回顾一下为什么会有插件。插件为你提供了自定义 Storybook 以适应工作流程的超能力。可以把它想象成 VSCode 扩展或 Figma 插件。

插件结构在 Storybook 的核心 API 和开发者体验之间提供了清晰的分离。这为社区在其基础上构建提供了稳定且可扩展的架构。例如

新的插件生态系统让你更容易重用社区插件。

插件目录在一个地方展示了所有插件。它扫描 npm，按关键词组织插件，然后根据维护启发式算法和下载量进行排名。

从最受欢迎或趋势插件中选择。按类别浏览，查看特定任务的顶级插件列表。

点击插件查看安装说明和 readme 文件。

通过插件目录，你可以一目了然地辨别插件的可靠性和兼容性。

我们采访了来自 Atlassian、Datadog 和 Intuit 的开发者，了解如何让构建插件变得更容易。新的 API 文档概述了主要的插件类型以及可用的代码示例。

基于 UI 的插件可以自定义界面，为重复性任务添加快捷方式，或显示额外信息。它们影响 UI 的三个区域：工具栏 (Toolbar)、标签页 (Tab) 和面板 (Panel)。

预设插件结合了一系列 Storybook 配置，这些配置会自动应用。它们用于将 Storybook 与特定的技术（如 create-react-app、Next 或 SCSS）集成。

Storybook 还附带了 @storybook/components，这是一个现成的组件库，我们用它来构建 UI。它是一种方便的快捷方式，可以以“原生”方式为你的插件设置样式。新的文档详细介绍了如何在你的项目中导入这些组件。

此外，我们正在推出一系列教程，“如何构建 Storybook 插件”。这是一个分步指南，带你从概念到代码，再到发布到 npm。在这里阅读第一章。

插件是扩展 Storybook 的强大方式。我们正在彻底改革插件生态系统，因为当有大量节省时间的插件时，整个社区都会受益。

注册下方的邮件列表加入 Beta 版测试。你将优先获取插件目录和 Storybook 新闻。我们很高兴与你合作构建强大的集成。

你是否有现有的插件？我们正在展示有用的社区插件以供发布。请在 Storybook 的 Discord 中私信我 (@domyen)。