本文档全面介绍了 Storybook 的代码库,涵盖了其目的、架构和关键系统。Storybook 是一款用于隔离构建 UI 组件和页面的前端开发工具,广泛用于开发、测试和文档编制。
有关特定子系统的详细信息,请参阅 项目结构、核心架构、包生态系统、构建系统、CLI 和项目初始化、测试基础设施 和 开发工作流程。
Storybook 是一个用于隔离构建 UI 组件和页面的前端工作空间。它作为一个开发环境,团队可以在其中在主应用程序上下文之外开发、测试和记录 UI 组件。该工具支持众多前端框架,并提供广泛的测试功能、插件系统和文档功能。
当前状态(9.0 版)
Storybook 9.0 代表了在测试功能和包优化方面的主要发展。
| 功能类别 | 关键改进 |
|---|---|
| 组件测试 | 交互、可访问性测试、视觉测试、覆盖率报告 |
| 捆绑包优化 | 通过打包整合,包体积减轻 48% |
| 组织架构 | 基于标签的故事组织 |
| 框架支持 | Svelte、Next.js、React Native 和 Angular 的重大升级 |
| 包架构 | 整合核心包,实现公共/内部 API 分离 |
来源:CHANGELOG.md38-54 docs/versions/latest.json1 README.md41-53
Storybook 的代码库遵循复杂的多仓库架构,在多个层之间清晰地划分了职责。
系统架构概览
来源:package.json3-20 yarn.lock8-12
打包整合策略(9.0 版)
来源:CHANGELOG.md224 CHANGELOG.md100-102 CHANGELOG.md182-183
Storybook 的框架支持遵循分层架构,将框架、渲染器和构建工具之间的职责分开。
框架集成层
来源:README.md99-112 CHANGELOG.md143 CHANGELOG.md220
开发工作流程集成了多个系统,用于在不同环境构建、测试和分发 Storybook。
开发工作流架构
来源:package.json13-19 CONTRIBUTING.md25-27 CONTRIBUTING.md49-51
CI/CD 管道架构
来源:package.json4-19 .gitignore31-45
现代 Storybook 架构强调整合的包结构,具有清晰的 API 边界。
核心包结构
| 包路径 | 目的 | API 级别 |
|---|---|---|
storybook/manager-api | 管理器 UI 和侧边栏功能 | 公开 |
storybook/preview-api | 故事渲染和预览环境 | 公开 |
storybook/theming | 主题系统和 UI 组件 | 公开 |
storybook/test | 测试实用工具和组件测试 | 公开 |
storybook/internal/channels | 管理器和预览之间的通信 | 内部信息 |
storybook/internal/types | TypeScript 类型定义。 | 内部信息 |
storybook/internal/common | 共享工具和辅助函数 | 内部信息 |
框架和插件生态系统
来源:CHANGELOG.md169 CHANGELOG.md100-102 CHANGELOG.md157 CHANGELOG.md288
此概述为理解 Storybook 的架构和演进奠定了基础。该系统代表了一个成熟、组织良好、拥有复杂工具的 monorepo,可用于跨多种前端框架进行 UI 组件开发、测试和文档编制。