插件目录先睹为快
自动化和扩展 Storybook
插件是 Storybook 受欢迎的重要原因。社区拥有超过 200 个插件，可以扩展你的 UI 开发工作流程。但使用插件很棘手。
弄清楚如何创建插件很困难，更不用说与他人分享了。大多数插件是由雄心勃勃的开发者或像 Ticketmaster、乐天和 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 的三个区域：工具栏、选项卡和面板。
预设插件
预设插件结合了自动应用的一系列 Storybook 配置。它们用于将 Storybook 与特定技术集成，如 create-react-app、Next 或 SCSS。
@storybook/components
Storybook 还附带 @storybook/components，这是一个现成的组件库，我们用它来构建 UI。这是以“原生”方式设置插件样式的便捷快捷方式。新文档介绍了如何在你的项目中导入这些组件。
插件教程
此外，我们正在推出一个教程系列“如何构建 Storybook 插件”。这是一个分步指南，它将带你从概念到代码再到发布到 npm。阅读第一章。
加入 Beta 测试
插件是扩展 Storybook 的强大方法。我们正在彻底改造插件生态系统，因为当有大量的节省时间的插件时，整个社区都会受益。
通过注册下面的邮件列表加入 Beta 测试。你将获得插件目录和 Storybook 新闻的优先访问权。我们很高兴与你合作构建强大的集成。
你是否有现有的插件？ 我们正在展示有用的社区插件以供发布。在 Storybook 的 Discord 中直接给我（@domyen）发消息。