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 [目錄名稱]`	將統計資料 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=http://localhost: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 [目錄名稱]`	將統計資料 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=http://localhost: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 [...值]`	安裝時使用這些功能，跳過提示。支援的值為 `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 [addon] --package-manager pnpm`
`-s`, `--skip-postinstall`	跳過後安裝設定。僅在您需要自行設定附加元件時使用。 `storybook add [addon] --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 [addon]--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 實例。 `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 專案的流程，提供了一個名為 create-storybook 的獨立 CLI。當執行 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 [...值]`	安裝時使用這些功能，跳過提示。支援的值為 `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`