返回博客

插件目录抢先看

自动化和扩展 Storybook

loading
Dominic Nguyen
@domyen
最后更新

插件是 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)。

加入 Storybook 邮件列表

获取最新新闻、更新和发布

7,180开发者以及持续增加中

我们正在招聘!

加入 Storybook 和 Chromatic 团队。构建被成千上万开发者用于生产环境的工具。优先远程工作。

查看职位

热门文章

改造 Storybook 的插件生态系统

更新了文档的插件目录 Beta 版
loading
Dominic Nguyen

插件生态系统 2.0

新的插件目录、教程和文档
loading
Dominic Nguyen

Storybook 6.1

为快速 UI 开发而生
loading
Michael Shilman
加入社区
7,180开发者以及持续增加中
为什么为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与其中博客
展示探索项目组件术语表
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI