插件介绍
插件使用未内置于核心中的功能和集成来扩展 Storybook。大多数 Storybook 功能都是作为插件实现的。例如：documentation、可访问性测试、交互式控件 等。插件 API 让你可以轻松地以新的方式配置和自定义 Storybook。社区制作了无数插件，可以解锁节省时间的工作流程。
¥Addons extend Storybook with features and integrations that are not built into the core. Most Storybook features are implemented as addons. For instance: documentation, accessibility testing, interactive controls, among others. The addon API makes it easy for you to configure and customize Storybook in new ways. There are countless addons made by the community that unlocks time-saving workflows.
浏览我们的 插件目录 以安装现有插件或作为你自己的插件的灵感。
¥Browse our addon catalog to install an existing addon or as inspiration for your own addon.
Storybook 基础知识
¥Storybook basics
在编写你的第一个 addon 之前，让我们先了解一下 Storybook 架构的基础知识。虽然 Storybook 提供了统一的用户界面，但在底层它被分成管理器和预览。
¥Before writing your first addon, let’s take a look at the basics of Storybook’s architecture. While Storybook presents a unified user interface, under the hood it’s divided down the middle into Manager and Preview.
管理器是负责渲染以下内容的 UI：
¥The Manager is the UI responsible for rendering the:
-
🔍 搜索
¥🔍 Search
-
🧭 导航
¥🧭 Navigation
-
🔗 工具栏
¥🔗 Toolbars
-
📦 插件
¥📦 Addons
预览区域是渲染你的故事的 iframe。
¥The Preview area is an iframe where your stories are rendered.
由于两个元素都在自己单独的 iframes 中运行，因此它们使用通信通道保持同步。例如，当你在管理器中选择一个故事时，会通过渠道分派一个事件，通知预览渲染该故事。
¥Because both elements run in their own separate iframes, they use a communication channel to keep in sync. For example, when you select a story in the Manager an event is dispatched across the channel notifying the Preview to render the story.
插件剖析
¥Anatomy of an addon
Storybook 插件允许你扩展 Storybook 已经可以实现的功能，从 用户界面 到 API 的所有内容。每个都分为两个更广泛的类别。
¥Storybook addons allow you to extend what's already possible with Storybook, everything from the user interface to the API. Each one is classified into two broader categories.
基于 UI 插件
¥UI-based addons
基于 UI 插件 专注于自定义 Storybook 的用户界面以扩展你的开发工作流程。基于 UI 的插件示例包括：控件、文档 和 可访问性。
¥UI-based addons focus on customizing Storybook's user interface to extend your development workflow. Examples of UI-based addons include: Controls, Docs and Accessibility.
¥Learn how to write an addon »
预设插件
¥Preset addons
预设插件 帮助你将 Storybook 与其他技术和库集成。预设插件的一个示例是 preset-create-react-app。
¥Preset addons help you integrate Storybook with other technologies and libraries. An examples of a preset addons is preset-create-react-app.