菜单

插件系统

相关源文件

本文档解释了 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-loaderMDX 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