菜单

项目结构

相关源文件

本文档解释了 Storybook monorepo 的高层组织结构,包括根目录的编排系统、工作区结构和目录组织模式。有关构建管道和软件包准备的信息,请参阅 构建系统。有关 CI/CD 工作流程和测试基础设施的详细信息,请参阅 开发工作流程

概述

Storybook 采用分层 monorepo 结构,包含三个主要层级:一个将任务委派给特定子目录的根编排层、一个管理包间相互依赖的核心工作区系统,以及按功能领域组织的各个包目录。整个代码库通过 Yarn 工作区协调,并通过委派的任务执行进行管理。

根目录编排系统

存储库的根目录包含最少的编排文件,所有实质性工作都委派给专门的子目录。这种模式将高层协调与实现细节分离开来。

根目录结构

来源:package.json1-25 yarn.lock1-13 CHANGELOG.prerelease.md1-10

根目录的 package.json3-19 只包含将命令转发到相应子目录的委托脚本

脚本委托目标目的
任务scripts/开发工作流程的任务运行器
testcode/测试执行
lintcode/代码质量检查
nxcode/Nx 工作区命令
ci-testscode/CI 测试管道

Monorepo 工作区组织

code/ 目录包含管理所有 Storybook 包的主要 Yarn 工作区。此工作区使用“中心辐射”模式,核心包位于中心,并按功能领域组织专门的包。

工作空间结构

来源:code/package.json15-25 code/package.json104-144

工作区配置在 code/package.json15-25 定义了包的位置

核心包架构

core/ 目录包含主要的 storybook 包,它构成了所有其他包的基础。该包通过复杂的模块导出系统导出公共 API 和内部实用程序。

来源:code/core/package.json34-394 code/core/src/common/versions.ts1-54

核心包 code/core/package.json34-394 定义了广泛的导出,提供公共和内部 API。关键导出模式包括

  • 公共 API:storybook/preview-apistorybook/manager-apistorybook/theming
  • 内部 API:storybook/internal/* 用于框架和插件开发
  • 功能模块:内置插件,如 backgrounds、actions、controls、viewport

包组织模式

每个包类别都遵循一致的组织模式,以方便 monorepo 的开发和维护。

框架包结构

框架包将 Storybook 与特定的前端框架和构建工具集成。它们通常结合渲染器和构建器,并提供特定于框架的配置。

来源:code/package.json135-143 code/core/src/common/versions.ts21-34

插件包结构

插件包扩展了 Storybook 的功能,并遵循包含管理器 UI 组件和预览装饰器或实用程序的模式。

来源:code/package.json110-118 code/core/src/common/versions.ts3-17

版本管理和协调

monorepo 通过自动化工具和共享版本文件在所有包之间维护版本同步。

版本协调系统

来源:code/core/src/common/versions.ts1-54 docs/versions/next.json1-2 code/core/src/manager-api/version.ts1-2

code/core/src/common/versions.ts 文件是 monorepo 中所有包版本信息的权威来源。此文件是自动生成的,可跨以下包保持一致性:

  • 核心包:storybook
  • 插件包:@storybook/addon-*
  • 框架包:@storybook/react-vite@storybook/angular 等。
  • CLI 工具:create-storybook@storybook/cli

所有包的当前版本为 9.1.0-alpha.4,这表明这是 Storybook 9.1 的预发布版本。

来源:package.json1-25 code/package.json1-287 scripts/package.json1-196 code/core/package.json1-800 code/core/src/common/versions.ts1-54 docs/versions/next.json1-2 CHANGELOG.prerelease.md1-50