
插件目录抢先看
自动化和扩展 Storybook
插件是 Storybook 受欢迎的重要原因。社区拥有超过 200 个插件,可以扩展你的 UI 开发工作流程。但是,使用插件可能有些棘手。
很难弄清楚如何创建插件,更不用说与他人分享了。大多数插件由有抱负的开发者或像 Ticketmaster、Rakuten 和 eBay 这样的专业团队创建。
这就是为什么我很高兴向大家抢先展示 Storybook 全新的插件目录应用和深入指南。我们正在让插件的创建、查找和重用变得更加容易。

什么是插件?
在我们开始之前,先回顾一下为什么会有插件。插件为你提供了自定义 Storybook 以适应工作流程的超能力。可以把它想象成 VSCode 扩展或 Figma 插件。
插件结构在 Storybook 的核心 API 和开发者体验之间提供了清晰的分离。这为社区在其基础上构建提供了稳定且可扩展的架构。例如
- Storybook 的功能如 Actions、Controls 和 Docs 都是作为插件实现的。
- 公司如 Ebay、Ticketmaster 和 Intuit 通过插件解决特定领域的工作流程。
- 开源项目如 Next、CRA 和 Nuxt 通过插件简化了集成。
- 云工具如 InVision 和 Abstract 通过插件简化了产品开发周期。
- 独立开发者如 Alex Holachek 和 Shota Fuji 通过插件解决了他们自己的需求
新的插件生态系统让你更容易重用社区插件。
“总有插件能满足你的需求”
插件目录在一个地方展示了所有插件。它扫描 npm,按关键词组织插件,然后根据维护启发式算法和下载量进行排名。
从最受欢迎或趋势插件中选择。按类别浏览,查看特定任务的顶级插件列表。
点击插件查看安装说明和 readme 文件。
通过插件目录,你可以一目了然地辨别插件的可靠性和兼容性。
如何构建插件
我们采访了来自 Atlassian、Datadog 和 Intuit 的开发者,了解如何让构建插件变得更容易。新的 API 文档概述了主要的插件类型以及可用的代码示例。
基于 UI 的插件
基于 UI 的插件可以自定义界面,为重复性任务添加快捷方式,或显示额外信息。它们影响 UI 的三个区域:工具栏 (Toolbar)、标签页 (Tab) 和面板 (Panel)。



预设插件
预设插件结合了一系列 Storybook 配置,这些配置会自动应用。它们用于将 Storybook 与特定的技术(如 create-react-app、Next 或 SCSS)集成。
@storybook/components
Storybook 还附带了 @storybook/components,这是一个现成的组件库,我们用它来构建 UI。它是一种方便的快捷方式,可以以“原生”方式为你的插件设置样式。新的文档详细介绍了如何在你的项目中导入这些组件。



插件教程
此外,我们正在推出一系列教程,“如何构建 Storybook 插件”。这是一个分步指南,带你从概念到代码,再到发布到 npm。在这里阅读第一章。
加入 Beta 版测试
插件是扩展 Storybook 的强大方式。我们正在彻底改革插件生态系统,因为当有大量节省时间的插件时,整个社区都会受益。
注册下方的邮件列表加入 Beta 版测试。你将优先获取插件目录和 Storybook 新闻。我们很高兴与你合作构建强大的集成。
你是否有现有的插件?我们正在展示有用的社区插件以供发布。请在 Storybook 的 Discord 中私信我 (@domyen)。