菜单

概述

相关源文件

本文档全面介绍了 Storybook 的代码库,涵盖了其目的、架构和关键系统。Storybook 是一款用于隔离构建 UI 组件和页面的前端开发工具,广泛用于开发、测试和文档编制。

有关特定子系统的详细信息,请参阅 项目结构核心架构包生态系统构建系统CLI 和项目初始化测试基础设施开发工作流程

什么是 Storybook

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

包组织和 API

现代 Storybook 架构强调整合的包结构,具有清晰的 API 边界。

核心包结构

包路径目的API 级别
storybook/manager-api管理器 UI 和侧边栏功能公开
storybook/preview-api故事渲染和预览环境公开
storybook/theming主题系统和 UI 组件公开
storybook/test测试实用工具和组件测试公开
storybook/internal/channels管理器和预览之间的通信内部信息
storybook/internal/typesTypeScript 类型定义。内部信息
storybook/internal/common共享工具和辅助函数内部信息

框架和插件生态系统

来源:CHANGELOG.md169 CHANGELOG.md100-102 CHANGELOG.md157 CHANGELOG.md288

此概述为理解 Storybook 的架构和演进奠定了基础。该系统代表了一个成熟、组织良好、拥有复杂工具的 monorepo,可用于跨多种前端框架进行 UI 组件开发、测试和文档编制。