插件简介
插件通过提供核心功能中未内置的功能和集成来扩展 Storybook。大多数 Storybook 功能都是作为插件实现的。例如:文档、无障碍测试、交互式控件等等。插件 API 使您可以轻松地以新的方式配置和自定义 Storybook。社区创建了无数的插件,可以释放节省时间的流程。
浏览我们的 插件目录 以安装现有插件或作为您自己的插件的灵感来源。
Storybook 基础知识
在编写您的第一个 插件 之前,让我们先了解一下 Storybook 架构的基础知识。虽然 Storybook 提供了一个统一的用户界面,但在幕后,它被分成两个部分:**管理器**和**预览**。
**管理器**是负责渲染以下内容的 UI:
- 🔍 搜索
- 🧭 导航
- 🔗 工具栏
- 📦 插件
**预览**区域是一个 iframe
,您的故事在其中渲染。
因为这两个元素都运行在各自独立的 iframe
中,所以它们使用通信通道保持同步。例如,当您在管理器中选择一个故事时,会跨通道分派一个事件,通知预览渲染该故事。
插件的结构
Storybook 插件允许您扩展 Storybook 中已有的功能,从 用户界面 到 API。每个插件都分为两个更广泛的类别。
基于 UI 的插件
基于 UI 的插件 侧重于自定义 Storybook 的用户界面以扩展您的开发工作流程。基于 UI 的插件示例包括:控件、文档和 无障碍测试。
预设插件
预设插件 可以帮助您将 Storybook 与其他技术和库集成。预设插件的一个示例是 preset-create-react-app。