菜单

CLI 和项目初始化

相关源文件

本文档介绍了用于 Storybook 开发和测试的命令行界面 (CLI) 系统、项目初始化流程、框架检测、模板管理和本地注册表设置。CLI 作为开发者创建、配置和管理 Storybook 项目的主要入口点。

有关更广泛的开发工作流程和 CI/CD 集成的信息,请参阅 开发工作流程。有关准备 CLI 包的构建系统详情,请参阅 构建系统

CLI 命令概览

Storybook CLI 提供多个关键命令来管理项目生命周期

命令目的主要用例
storybook init初始化新的 Storybook 项目新项目设置
storybook dev启动开发服务器开发工作流程
storybook build构建静态 Storybook生产部署
storybook upgrade升级现有项目版本迁移
sb init替代 init 命令简写语法

CLI 命令流程

来源:架构图已在上下文中提供

项目初始化流程

初始化流程遵循结构化工作流程,以检测目标框架并应用适当的配置模板。

初始化工作流程

生成的配置结构

初始化流程会创建一个标准的 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 配置。

检测算法

框架到模板的映射

检测到的框架构建工具选定的模板
ReactVitereact-vite
ReactWebpackreact-webpack5
Vue 3Vitevue3-vite
AngularWebpackangular
SvelteVitesvelte-vite
SvelteKitVitesveltekit

来源:架构图已在上下文中提供

模板系统

模板系统为不同的框架和构建工具组合提供了预配置的 Storybook 设置。

模板结构

模板应用流程

选择模板时,系统会执行以下操作

  1. 文件复制:将模板文件复制到目标项目
  2. 依赖解析:添加框架适用的依赖项
  3. 配置生成:创建构建工具和框架特定的配置
  4. 故事生成:添加与检测到的框架匹配的示例故事

来源:架构图已在上下文中提供

本地注册表 (Verdaccio) 设置

Storybook 使用 Verdaccio 作为本地 npm 注册表,用于开发和测试目的。这使得能够使用本地构建的包来测试 CLI 功能。

Verdaccio 配置

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 测试集成

CLI 系统通过 Verdaccio 注册表和沙箱系统与测试基础设施集成。

测试工作流程

注册表在测试中的使用

测试过程依赖 Verdaccio 来

  1. 隔离依赖:使用特定的包版本进行测试
  2. 启用本地测试:在发布前使用本地构建的包
  3. 模拟生产:测试完整的安装和初始化流程
  4. 验证模板:确保模板与当前包版本兼容

来源:scripts/verdaccio.yaml1-228 架构图已在上下文中提供

迁移和升级系统

CLI 包括一个升级系统,用于将现有 Storybook 项目迁移到新版本。

升级流程

升级系统处理

  • 依赖更新:自动更新包版本
  • 配置迁移:将配置文件转换为新格式
  • 代码转换:更新故事和插件代码以适应 API 更改
  • 重大更改处理:提供手动迁移步骤的指导

来源:架构图已在上下文中提供