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