本文档介绍了用于 Storybook 开发和测试的命令行界面 (CLI) 系统、项目初始化流程、框架检测、模板管理和本地注册表设置。CLI 作为开发者创建、配置和管理 Storybook 项目的主要入口点。
有关更广泛的开发工作流程和 CI/CD 集成的信息,请参阅 开发工作流程。有关准备 CLI 包的构建系统详情,请参阅 构建系统。
Storybook CLI 提供多个关键命令来管理项目生命周期
| 命令 | 目的 | 主要用例 |
|---|---|---|
storybook init | 初始化新的 Storybook 项目 | 新项目设置 |
storybook dev | 启动开发服务器 | 开发工作流程 |
storybook build | 构建静态 Storybook | 生产部署 |
storybook upgrade | 升级现有项目 | 版本迁移 |
sb init | 替代 init 命令 | 简写语法 |
来源:架构图已在上下文中提供
初始化流程遵循结构化工作流程,以检测目标框架并应用适当的配置模板。
初始化流程会创建一个标准的 Storybook 项目结构
.storybook/
├── main.js # Primary configuration
├── preview.js # Preview environment setup
└── public/ # Static assets (optional)
src/stories/ # Example stories
├── Button.stories.js
├── Header.stories.js
└── Page.stories.js
来源:架构图已在上下文中提供
框架检测系统会分析目标项目,以确定合适的 Storybook 配置。
| 检测到的框架 | 构建工具 | 选定的模板 |
|---|---|---|
| React | Vite | react-vite |
| React | Webpack | react-webpack5 |
| Vue 3 | Vite | vue3-vite |
| Angular | Webpack | angular |
| Svelte | Vite | svelte-vite |
| SvelteKit | Vite | sveltekit |
来源:架构图已在上下文中提供
模板系统为不同的框架和构建工具组合提供了预配置的 Storybook 设置。
选择模板时,系统会执行以下操作
来源:架构图已在上下文中提供
Storybook 使用 Verdaccio 作为本地 npm 注册表,用于开发和测试目的。这使得能够使用本地构建的包来测试 CLI 功能。
Verdaccio 设置配置在 scripts/verdaccio.yaml1-228 中,它提供了
Verdaccio 配置处理三种类别的包
| 类别 | 目的 | 代理行为 |
|---|---|---|
| 当前 Storybook 包 | Monorepo 中的活动包 | 无代理 - 仅本地 |
| 旧版 Storybook 包 | 已弃用的包 | 代理到 npmjs |
| 外部包 | 所有其他 npm 包 | 代理到 npmjs |
注册表提供对关键 CLI 包的访问
storybook - 主要 CLI 包sb - 简短的 CLI 别名create-storybook - 项目创建工具@storybook/* - 所有 Storybook 范围的包来源:scripts/verdaccio.yaml1-228
CLI 系统通过 Verdaccio 注册表和沙箱系统与测试基础设施集成。
测试过程依赖 Verdaccio 来
来源:scripts/verdaccio.yaml1-228 架构图已在上下文中提供
CLI 包括一个升级系统,用于将现有 Storybook 项目迁移到新版本。
升级系统处理
来源:架构图已在上下文中提供