CLI 选项

Storybook 命令行界面 (CLI) 是您用来构建和开发 Storybook 的主要工具。

Storybook 收集完全匿名的数据，以帮助我们改善用户体验。参与是可选的，如果您不想分享任何信息，可以选择退出。

CLI 命令

以下所有文档都可以在 CLI 中通过运行 storybook --help 获得。

如果您使用 npm 而不是 Yarn，则将选项传递给这些命令的方式略有不同。您必须在所有选项前加上 --。例如，npm run storybook build -- -o ./path/to/build --quiet。

`dev`

编译并提供 Storybook 的开发版本，该版本实时反映浏览器中源代码的更改。它应该从项目的根目录运行。

storybook dev [options]

选项包括

选项	描述
`--help`	输出使用信息。 `storybook dev --help`
`-V`, `--version`	输出版本号。 `storybook dev -V`
`-p`, `--port [数字]`	运行 Storybook 的端口。 `storybook dev -p 9009`
`--exact-port [数字]`	尝试在指定的精确端口号上运行 Storybook。如果端口已被占用，Storybook 将退出并显示错误消息。 `storybook dev --exact-port 9009`
`-h`, `--host [字符串]`	运行 Storybook 的主机。 `storybook dev -h my-host.com`
`-c`, `--config-dir [目录名]`	从中加载 Storybook 配置的目录。 `storybook dev -c .storybook`
`--loglevel [级别]`	控制构建期间的日志记录级别。可用选项：`silly`、`verbose`、`info`（默认）、`warn`、`error`、`silent` `storybook dev --loglevel warn`
`--https`	通过 HTTPS 提供 Storybook。注意：您必须提供自己的证书信息。 `storybook dev --https`
`--ssl-ca`	提供 SSL 证书颁发机构。（使用 --https 是可选的，如果使用自签名证书则是必需的） `storybook dev --ssl-ca my-certificate`
`--ssl-cert`	提供 SSL 证书。（使用 --https 是必需的） `storybook dev --ssl-cert my-ssl-certificate`
`--ssl-key`	提供 SSL 密钥。（使用 --https 是必需的） `storybook dev --ssl-key my-ssl-key`
`--smoke-test`	成功启动后退出。 `storybook dev --smoke-test`
`--ci`	CI 模式（跳过交互式提示，不打开浏览器）。 `storybook dev --ci`
`--no-open`	不要在浏览器中自动打开 Storybook。 `storybook dev --no-open`
`--quiet`	抑制详细的构建输出。 `storybook dev --quiet`
`--debug`	在 CLI 中输出更多日志以协助调试。 `storybook dev --debug`
`--debug-webpack`	显示最终的 webpack 配置以进行调试。 `storybook dev --debug-webpack`
`--stats-json [目录名]`	将 stats JSON 写入磁盘。需要 Webpack `storybook dev --stats-json /tmp/stats`
`--no-version-updates`	跳过 Storybook 的更新检查。 `storybook dev --no-version-updates`
`--docs`	在文档模式下启动 Storybook。在此处了解更多信息。 `storybook dev --docs`
`--initial-path [路径]`	配置 Storybook 首次打开浏览器时应打开的 URL。 `storybook dev --initial-path=/docs/getting-started--docs`
`--preview-url [路径]`	使用自定义构建的预览 URL 覆盖默认的 Storybook 预览。 `storybook dev --preview-url=https://127.0.0.1:1337/external-iframe.html`
`--force-build-preview`	强制构建 Storybook 的预览 iframe。如果您遇到问题，或者与 `--preview-url` 结合使用以确保预览是最新的，则此选项非常有用。 `storybook dev --force-build-preview`
`--disable-telemetry`	禁用 Storybook 的遥测功能。在此处了解更多信息。 `storybook dev --disable-telemetry`
`--enable-crash-reports`	启用将崩溃报告发送到 Storybook 的遥测功能。在此处了解更多信息。 `storybook dev --enable-crash-reports`

随着 Storybook 8 的发布，-s CLI 标志已被移除。如果您需要提供静态文件，我们建议改用静态目录。

`build`

编译您的 Storybook 实例，以便可以部署。它应该从项目的根目录运行。

storybook build [options]

选项包括

选项	描述
`-h`, `--help`	输出使用信息。 `storybook build --help`
`-V`, `--version`	输出版本号。 `storybook build -V`
`-o`, `--output-dir [目录名]`	用于存储构建文件的目录。 `storybook build -o /my-deployed-storybook`
`-c`, `--config-dir [目录名]`	从中加载 Storybook 配置的目录。 `storybook build -c .storybook`
`--loglevel [级别]`	控制构建期间的日志记录级别。可用选项：`silly`、`verbose`、`info`（默认）、`warn`、`error`、`silent`。 `storybook build --loglevel warn`
`--quiet`	抑制详细的构建输出。 `storybook build --quiet`
`--debug`	在 CLI 中输出更多日志以协助调试。 `storybook build --debug`
`--debug-webpack`	显示最终的 webpack 配置以进行调试。 `storybook build --debug-webpack`
`--stats-json [目录名]`	将 stats JSON 写入磁盘。需要 Webpack `storybook build --stats-json /tmp/stats`
`--docs`	在文档模式下构建 Storybook。在此处了解更多信息。 `storybook build --docs`
`--test`	通过使用 `test` 选项删除不必要的功能，优化 Storybook 的生产构建以获得性能和测试。在此处了解更多信息。 `storybook build --test`
`--preview-url [路径]`	使用自定义构建的预览 URL 覆盖默认的 Storybook 预览。 `storybook build --preview-url=https://127.0.0.1:1337/external-iframe.html`
`--force-build-preview`	强制构建 Storybook 的预览 iframe。如果您遇到问题，或者与 `--preview-url` 结合使用以确保预览是最新的，则此选项非常有用。 `storybook build --force-build-preview`
`--disable-telemetry`	禁用 Storybook 的遥测功能。在此处了解更多信息。 `storybook build --disable-telemetry`
`--enable-crash-reports`	启用将崩溃报告发送到 Storybook 的遥测功能。在此处了解更多信息。 `storybook build --enable-crash-reports`

`init`

我们建议新项目使用 create-storybook。init 命令将继续为后向兼容性提供。

将指定版本（例如，@latest、@8、@next）的 Storybook 安装并初始化到您的项目中。如果未指定版本，则安装最新版本。在安装指南中阅读更多信息。

storybook[@version] init [options]

例如，storybook@8.4 init 将在您的项目中安装 Storybook 8.4。

选项包括

选项	描述
`-h`, `--help`	输出使用信息。 `storybook init --help`
`-b`, `--builder`	定义用于您的 Storybook 实例的构建器。 `storybook init --builder webpack5`
`-f`, `--force`	强制将 Storybook 安装到您的项目中，提示您覆盖现有文件。 `storybook init --force`
`-s`, `--skip-install`	跳过依赖项安装步骤。仅当您需要手动配置 Storybook 时使用。 `storybook init --skip-install`
`-t`, `--type`	定义用于您的 Storybook 实例的框架。 `storybook init --type solid`
`-y`, `--yes`	跳过交互式提示，并自动安装指定版本的 Storybook，包括所有功能。 `storybook init --yes`
`--features [...values]`	安装时使用这些功能，跳过提示。支持的值为 `docs` 和 `test`，以空格分隔。 `storybook init --features docs test`
`--package-manager`	设置安装 Storybook 时要使用的包管理器。可用的包管理器包括 `npm`、`yarn` 和 `pnpm`。 `storybook init --package-manager pnpm`
`--use-pnp`	为 Yarn 启用 Plug'n'Play 支持。此选项仅在使用 Yarn 作为包管理器时可用。 `storybook init --use-pnp`
`-p`, `--parser`	设置 jscodeshift 解析器。可用的解析器包括 `babel`、`babylon`、`flow`、`ts` 和 `tsx`。 `storybook init --parser tsx`
`--debug`	在 CLI 中输出更多日志以协助调试。 `storybook init --debug`
`--disable-telemetry`	禁用 Storybook 的遥测功能。在此处了解更多信息。 `storybook init --disable-telemetry`
`--enable-crash-reports`	启用将崩溃报告发送到 Storybook 的遥测功能。在此处了解更多信息。 `storybook init --enable-crash-reports`
`--no-dev`	完成 Storybook 的初始化，而无需运行 Storybook 开发服务器。 `storybook init --no-dev`

`add`

安装 Storybook 插件并为其配置项目。在插件安装指南中阅读更多信息。

storybook add [addon] [options]

选项包括

选项	描述
`-h`, `--help`	输出使用信息。 `storybook add --help`
`-c`, `--config-dir`	从中加载 Storybook 配置的目录。 `storybook migrate --config-dir .storybook`
`--package-manager`	设置安装插件时要使用的包管理器。可用的包管理器包括 `npm`、`yarn` 和 `pnpm`。 `storybook add [插件] --package-manager pnpm`
`-s`, `--skip-postinstall`	跳过安装后配置。仅当您需要自己配置插件时使用。 `storybook add [插件] --skip-postinstall`
`--debug`	在 CLI 中输出更多日志以协助调试。 `storybook add --debug`

`remove`

从您的项目中删除 Storybook 插件。在插件安装指南中阅读更多信息。

storybook remove [addon] [options]

选项包括

选项	描述
`-h`, `--help`	输出使用信息。 `storybook remove --help`
`--package-manager`	设置删除插件时要使用的包管理器。可用的包管理器包括 `npm`、`yarn` 和 `pnpm`。 `storybook remove [插件]--package-manager pnpm`
`--debug`	在 CLI 中输出更多日志以协助调试。 `storybook remove --debug`
`--disable-telemetry`	禁用 Storybook 的遥测功能。在此处了解更多信息。 `storybook remove --disable-telemetry`
`--enable-crash-reports`	启用将崩溃报告发送到 Storybook 的遥测功能。在此处了解更多信息。 `storybook remove --enable-crash-reports`

`upgrade`

将您的 Storybook 实例升级到指定的版本（例如，@latest、@8、@next）。在升级指南中阅读更多信息。

storybook[@version] upgrade [options]

例如，storybook@latest upgrade --dry-run 将执行将您的项目升级到最新版本 Storybook 的空运行（无实际更改）。

选项包括

选项	描述
`-h`, `--help`	输出使用信息。 `storybook upgrade --help`
`-c`, `--config-dir`	从中加载 Storybook 配置的目录。 `storybook upgrade --config-dir .storybook`
`-n`, `--dry-run`	检查版本升级，但不安装它们。 `storybook upgrade --dry-run`
`-s`, `--skip-check`	在升级过程中跳过迁移检查步骤。 `storybook upgrade --skip-check`
`-y`, `--yes`	跳过交互式提示并自动将 Storybook 升级到最新版本。 `storybook upgrade --yes`
`-f`,`--force`	强制升级，跳过自动阻止程序检查。 `storybook upgrade --force`
`--package-manager`	设置升级 Storybook 时要使用的包管理器。可用的包管理器包括 `npm`、`yarn` 和 `pnpm`。 `storybook upgrade --package-manager pnpm`
`--debug`	在 CLI 中输出更多日志以协助调试。 `storybook upgrade --debug`
`--disable-telemetry`	禁用 Storybook 的遥测功能。在此处了解更多信息。 `storybook upgrade --disable-telemetry`
`--enable-crash-reports`	启用将崩溃报告发送到 Storybook 的遥测功能。在此处了解更多信息。 `storybook upgrade --enable-crash-reports`

`migrate`

运行提供的 codemod，以确保您的 Storybook 项目与指定的版本兼容。在迁移指南中阅读更多信息。

storybook[@version] migrate [codemod] [options]

该命令需要 codemod 名称（例如，csf-2-to-3）作为参数，以将必要的更改应用于您的项目。您可以通过运行 storybook migrate --list 找到可用 codemod 的列表。

例如，storybook@latest migrate csf-2-to-3 --dry-run，检查您的项目以验证是否可以应用 codemod 而无需进行任何更改，并为您提供一份受影响文件的报告。

选项包括

选项	描述
`-h`, `--help`	输出使用信息。 `storybook migrate --help`
`-c`, `--config-dir`	从中加载 Storybook 配置的目录。 `storybook migrate --config-dir .storybook`
`-n`, `--dry-run`	验证迁移是否存在并显示将应用迁移的文件。 `storybook migrate --dry-run`
`-l`, `--list`	显示可用 codemod 的列表。 `storybook migrate --list`
`-g`, `--glob`	用于 codemod 应用于其上的文件的 Glob。 `storybook migrate --glob src/*/.stories.tsx`
`-p`, `--parser`	设置 jscodeshift 解析器。可用的解析器包括 `babel`、`babylon`、`flow`、`ts` 和 `tsx`。 `storybook migrate --parser tsx`
`-r`, `--rename [from-to]`	重命名受 codemod 影响的文件以包含提供的后缀。 `storybook migrate --rename ".js:.ts"`
`--debug`	在 CLI 中输出更多日志以协助调试。 `storybook migrate --debug`

`automigrate`

执行标准配置检查，以确定您的 Storybook 项目是否可以自动迁移到指定的版本。在迁移指南中阅读更多信息。

storybook[@version] automigrate [fixId] [options]

例如，storybook@latest automigrate --dry-run 扫描您的项目以查找可以自动应用的潜在迁移，而无需进行任何更改。

选项包括

选项	描述
`-h`, `--help`	输出使用信息。 `storybook automigrate --help`
`-c`, `--config-dir`	从中加载 Storybook 配置的目录。 `storybook automigrate --config-dir .storybook`
`-n`, `--dry-run`	检查可用的迁移，但不应用它们。 `storybook automigrate --dry-run`
`-s`, `--skip-install`	在适用的情况下跳过安装依赖项。 `storybook automigrate --skip-install`
`-y`, `--yes`	自动应用可用的迁移，而无需提示确认。 `storybook automigrate --yes`
`-l`, `--list`	显示可用自动迁移的列表。 `storybook automigrate --list`
`--package-manager`	设置运行自动迁移时要使用的包管理器。可用的包管理器包括 `npm`、`yarn` 和 `pnpm`。 `storybook automigrate --package-manager pnpm`
`--renderer`	指定运行自动迁移时要使用的 Storybook 渲染器。对于在同一项目中可能存在多个 Storybook 实例的 monorepo 环境非常有用。 `storybook automigrate --renderer vue`
`--debug`	在 CLI 中输出更多日志以协助调试。 `storybook automigrate --debug`
`--disable-telemetry`	禁用 Storybook 的遥测功能。在此处了解更多信息。 `storybook automigrate --disable-telemetry`
`--enable-crash-reports`	启用将崩溃报告发送到 Storybook 的遥测功能。在此处了解更多信息。 `storybook automigrate --enable-crash-reports`

`doctor`

对您的 Storybook 项目执行健康检查，以查找常见问题（例如，重复的依赖项、不兼容的插件或版本不匹配），并提供有关如何修复它们的建议。在升级 Storybook 版本时适用。

storybook doctor [options]

选项包括

选项	描述
`-h`, `--help`	输出使用信息。 `storybook doctor --help`
`-c`, `--config-dir`	从中加载 Storybook 配置的目录。 `storybook doctor --config-dir .storybook`
`--package-manager`	设置运行健康检查时要使用的包管理器。可用的包管理器包括 `npm`、`yarn` 和 `pnpm`。 `storybook doctor --package-manager pnpm`
`--debug`	在 CLI 中输出更多日志以协助调试。 `storybook doctor --debug`

`info`

报告有关您的环境的有用调试信息。在打开 issue 或讨论时提供信息很有帮助。

storybook info

示例输出

Storybook Environment Info:
 
  System:
    OS: macOS 14.2
    CPU: (8) arm64 Apple M3
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm <----- active
  Browsers:
    Chrome: 120.0.6099.199
  npmPackages:
    @storybook/addon-essentials: ^7.6.6 => 7.6.6
    @storybook/addon-interactions: ^7.6.6 => 7.6.6
    @storybook/addon-onboarding: ^1.0.10 => 1.0.10
    @storybook/blocks: ^7.6.6 => 7.6.6
    @storybook/preset-create-react-app: ^7.6.6 => 7.6.6
    @storybook/react: ^7.6.6 => 7.6.6
    @storybook/react-webpack5: ^7.6.6 => 7.6.6
    @storybook/test: ^7.6.6 => 7.6.6
    storybook: ^7.6.6 => 7.6.6
  npmGlobalPackages:
    chromatic: ^10.2.0 => 10.2.0

`sandbox`

使用指定版本（例如，@latest、@8、@next）生成本地沙箱项目，以基于受支持的框架列表测试 Storybook 功能。在打开 issue 或讨论时重现错误非常有用。

storybook[@version] sandbox [framework-filter] [options]

例如，storybook@next sandbox 将使用最新预发布版本的 Storybook 生成沙箱。

framework-filter 参数是可选的，可以过滤可用框架的列表。例如，storybook@next sandbox react 将仅提供生成基于 React 的沙箱。

选项包括

选项	描述
`-h`, `--help`	输出使用信息。 `storybook sandbox --help`
`-o`, `--output [目录名]`	配置沙箱项目的位置。 `storybook sandbox --output /my-sandbox-project`
`--no-init`	生成沙箱项目，而不初始化 Storybook。 `storybook sandbox --no-init`
`--debug`	在 CLI 中输出更多日志以协助调试。 `storybook sandbox --debug`
`--disable-telemetry`	禁用 Storybook 的遥测功能。在此处了解更多信息。 `storybook sandbox --disable-telemetry`
`--enable-crash-reports`	启用将崩溃报告发送到 Storybook 的遥测功能。在此处了解更多信息。 `storybook sandbox --enable-crash-reports`

如果您正在寻找可用沙箱的托管版本，请参阅 storybook.new。

`create-storybook`

为了简化创建新的 Storybook 项目的过程，提供了一个单独的 CLI，称为 create-storybook。当运行 create storybook 时，npm、pnpm 和 Yarn 等包管理器将执行此命令。您可以指定版本（例如，@latest、@8、@next），否则它将默认为最新版本。在安装指南中阅读更多信息。

create storybook[@version] [options]

例如，create storybook@8.6 将会把 Storybook 8.6 安装到你的项目中。

选项包括

选项	描述
`-h`, `--help`	输出使用信息。 `create storybook --help`
`-b`, `--builder`	定义用于您的 Storybook 实例的构建器。 `create storybook --builder webpack5`
`-f`, `--force`	强制将 Storybook 安装到您的项目中，提示您覆盖现有文件。 `create storybook --force`
`-s`, `--skip-install`	跳过依赖项安装步骤。仅当您需要手动配置 Storybook 时使用。 `create storybook --skip-install`
`-t`, `--type`	定义用于您的 Storybook 实例的框架。 `create storybook --type solid`
`-y`, `--yes`	跳过交互式提示，并自动安装指定版本的 Storybook，包括所有功能。 `create storybook --yes`
`--features [...values]`	安装时使用这些功能，跳过提示。支持的值为 `docs` 和 `test`，以空格分隔。 `create storybook --features docs test`
`--package-manager`	设置安装 Storybook 时要使用的包管理器。可用的包管理器包括 `npm`、`yarn` 和 `pnpm`。 `create storybook --package-manager pnpm`
`--use-pnp`	为 Yarn 启用 Plug'n'Play 支持。此选项仅在使用 Yarn 作为包管理器时可用。 `create storybook --use-pnp`
`-p`, `--parser`	设置 jscodeshift 解析器。可用的解析器包括 `babel`、`babylon`、`flow`、`ts` 和 `tsx`。 `create storybook --parser tsx`
`--debug`	在 CLI 中输出更多日志以协助调试。 `create storybook --debug`
`--disable-telemetry`	禁用 Storybook 的遥测功能。在此处了解更多信息。 `create storybook --disable-telemetry`
`--enable-crash-reports`	启用将崩溃报告发送到 Storybook 的遥测功能。在此处了解更多信息。 `create storybook --enable-crash-reports`
`--no-dev`	完成 Storybook 的初始化，而无需运行 Storybook 开发服务器。 `create storybook --no-dev`