本文档解释了 Storybook monorepo 的高层组织结构,包括根目录的编排系统、工作区结构和目录组织模式。有关构建管道和软件包准备的信息,请参阅 构建系统。有关 CI/CD 工作流程和测试基础设施的详细信息,请参阅 开发工作流程。
Storybook 采用分层 monorepo 结构,包含三个主要层级:一个将任务委派给特定子目录的根编排层、一个管理包间相互依赖的核心工作区系统,以及按功能领域组织的各个包目录。整个代码库通过 Yarn 工作区协调,并通过委派的任务执行进行管理。
存储库的根目录包含最少的编排文件,所有实质性工作都委派给专门的子目录。这种模式将高层协调与实现细节分离开来。
来源:package.json1-25 yarn.lock1-13 CHANGELOG.prerelease.md1-10
根目录的 package.json3-19 只包含将命令转发到相应子目录的委托脚本
| 脚本 | 委托目标 | 目的 |
|---|---|---|
任务 | scripts/ | 开发工作流程的任务运行器 |
test | code/ | 测试执行 |
lint | code/ | 代码质量检查 |
nx | code/ | Nx 工作区命令 |
ci-tests | code/ | CI 测试管道 |
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。关键导出模式包括
storybook/preview-api、storybook/manager-api、storybook/themingstorybook/internal/* 用于框架和插件开发每个包类别都遵循一致的组织模式,以方便 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 等。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