本文档解释了 Storybook 的插件架构,包括插件如何扩展核心功能、它们的包结构、打包模式以及核心集成插件和独立插件之间的区别。
有关核心包结构和 API 整合的信息,请参阅核心架构。有关特定框架的集成细节,请参阅框架渲染器。
Storybook 插件通过模块化架构扩展功能,该架构支持管理器 UI 增强和预览环境修改。该系统区分了作为独立包存在的独立插件以及已整合到核心包中的必备插件。
来源:code/addons/docs/package.json1-173 code/addons/actions/package.json1-74 code/addons/a11y/package.json1-111
独立插件遵循一致的包结构,针对不同环境和用例具有多个入口点。
@storybook/addon-docs 包展示了全面的导出模式。
| 导出路径 | 目的 | 模块格式 |
|---|---|---|
. | 主 API | .js, .mjs, .d.ts |
./preview | 预览环境 | .js, .mjs, .d.ts |
./blocks | 文档块 | .js, .mjs, .d.ts |
./manager | 管理器 UI | .js 仅 |
./preset | 配置预设 | .js 仅 |
./mdx-loader | MDX webpack 加载器 | .js 仅 |
来源:code/addons/docs/package.json27-69 code/addons/links/package.json23-41 code/addons/a11y/package.json28-42
插件通过 package.json 中的 bundler 字段使用专门的打包配置,为各种环境定义不同的入口点。
来源:code/addons/docs/package.json148-163 code/addons/links/package.json88-99 code/addons/a11y/package.json89-101
Storybook v9.0 合并后,将必备插件移至核心包,将空包作为兼容性填充。
一些插件包现在用作空的兼容性填充程序
这些包保持相同的导出结构,但打包配置最少
来源:code/addons/actions/package.json62-72 code/addons/controls/package.json62-72 code/addons/backgrounds/package.json62-72
独立插件包含用于在 Storybook 生态系统中显示元数据和框架兼容性信息。
| 插件 | 显示名称 | 不支持的框架 |
|---|---|---|
addon-docs | "Docs" | react-native |
addon-a11y | "Accessibility" | react-native |
addon-links | "Links" | react-native |
addon-jest | "Jest" | react-native |
来源:code/addons/docs/package.json166-172 code/addons/a11y/package.json104-110 code/addons/links/package.json102-108
插件通过 scripts/prepare/addon-bundle.ts 准备脚本集成到 Storybook 的构建系统中,该脚本负责处理专门的打包要求。
大多数独立插件使用相同的准备脚本
这与使用不同打包策略的框架包形成对比
来源:code/addons/docs/package.json109-111 code/addons/a11y/package.json65-67 code/frameworks/react-vite/package.json66-68
某些插件提供特定框架的组件和集成,尤其是在文档和测试场景中。
docs 插件通过专门的导出和兼容性层展示了广泛的框架支持。
来源:code/addons/docs/package.json60-66 code/addons/docs/package.json92-106