菜单

包生态系统

相关源文件

本文档概述了 Storybook 的包结构,包括核心包、框架集成、插件及其导出系统。它涵盖了 9.0 版本中的主要包合并,并解释了不同类型的包如何协同工作以提供 Storybook 的功能。

有关 CLI 系统和项目初始化的信息,请参阅 CLI 和项目初始化。有关处理这些包的构建系统的详细信息,请参阅 构建系统

核心包合并

Storybook 9.0 引入了一次重大合并,将许多独立包合并到主 storybook 包中,以降低复杂性并提高可维护性。

包迁移图

Controls、Backgrounds 和 Interactions 等核心插件现已直接内置到核心 storybook 包中,而其他插件在合并包中保持独立的导出路径。

来源:MIGRATION.md483-528

内部包组织

内部包用 /internal 子路径标记,以表示它们仅供内部使用,并可能在未来版本中被移除。

来源:MIGRATION.md508-528

框架包架构

框架包结合了渲染器和构建工具,为特定的 UI 框架提供了完整的开发环境。

框架包结构

框架包充当集成层,将渲染器与适当的构建工具结合起来,并提供特定于框架的配置。

来源:code/frameworks/react-vite/package.json1-106 code/frameworks/angular/package.json1-126 code/frameworks/svelte-vite/package.json1-92

框架导出模式

框架包通常提供多个导出入口,采用不同的模块格式以支持各种使用场景。

来源:code/frameworks/react-vite/package.json22-40 code/frameworks/vue3-vite/package.json22-44

渲染器包系统

渲染器包负责渲染故事和组件的特定于框架的逻辑。

渲染器包依赖

每个渲染器包都包含对其目标框架的对等依赖,并与 Storybook 的全局实用程序集成。

来源:code/renderers/react/package.json98-102 code/renderers/svelte/package.json71-73 code/renderers/vue3/package.json75-77

渲染器入口点

渲染器为不同的用例提供专门的入口点,为故事渲染、文档和测试提供单独的捆绑包。

来源:code/renderers/react/package.json39-42 code/renderers/svelte/package.json34-40 code/renderers/vue3/package.json34-35

插件包系统

插件包通过 Manager UI、Preview 装饰器和其他工具扩展 Storybook 的功能。

插件类别

核心插件现已内置到 storybook 包中,而专业插件仍作为独立的包存在。

来源:MIGRATION.md13-19 code/addons/docs/package.json1-173 code/addons/a11y/package.json1-111

插件导出结构

插件通常为 Manager 端 UI 组件和 Preview 端功能提供单独的入口点。

来源:code/addons/docs/package.json27-68 code/addons/links/package.json23-41 code/addons/a11y/package.json28-42

构建器包集成

构建器包负责处理不同构建工具的打包和开发服务器功能。

构建器架构

构建器抽象了底层构建工具的复杂性,并为框架包提供了统一的接口。

来源:code/frameworks/react-vite/package.json69-78 code/frameworks/angular/package.json54-64

依赖优化

Vite 构建器包含广泛的依赖项优化,以确保正确的 ESM 转换和性能。

来源:code/builders/builder-vite/src/optimizeDeps.ts11-150

包导出系统

Storybook 包使用复杂的导出映射来提供多个入口点和模块格式。

导出映射模式

导出类型目的示例路径
主入口主要的包功能"."
预览Preview 端功能"./preview"
管理器Manager 端 UI"./manager"
Preset配置预设"./preset"
节点Node.js 特定导出"./node"
区块文档块"./blocks"

模块格式支持

包提供多种模块格式,以支持不同的环境和打包场景。

来源:code/addons/docs/package.json27-69 code/frameworks/react-vite/package.json22-39

预设集成系统

预设提供了一种系统化的方法,让包能够为 Storybook 构建过程贡献配置和功能。

来源: code/addons/docs/src/preset.ts34-135 code/renderers/server/src/preset.ts14-52

包生态系统

本文档概述了 Storybook 的包结构,包括核心包、框架集成、插件及其导出系统。它涵盖了 9.0 版本中的主要包合并,并解释了不同类型的包如何协同工作以提供 Storybook 的功能。

有关 CLI 系统和项目初始化的信息,请参阅 CLI 和项目初始化。有关处理这些包的构建系统的详细信息,请参阅 构建系统