CLI 選項

Storybook 命令列介面 (CLI) 是您用來建置和開發 Storybook 的主要工具。

Storybook 會收集完全匿名的資料，以協助我們改善使用者體驗。參與是可選的，如果您不想分享任何資訊，可以選擇退出。

API 命令

所有下列文件都可以在 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=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 [目錄名稱]`	將統計資料 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`

將指定版本 (例如，@latest、@8、@next) 的 Storybook 安裝並初始化到您的專案中。請在安裝指南中閱讀更多相關資訊。

storybook[@version] init [options]

例如，storybook@latest init 會將最新版本的 Storybook 安裝到您的專案中。

選項包括

選項	描述
`-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`
`--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`

執行提供的程式碼轉換，以確保您的 Storybook 專案與指定的版本相容。請在移轉指南中閱讀更多相關資訊。

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

此命令需要程式碼轉換名稱 (例如，csf-2-to-3) 作為引數，以將必要的變更套用至您的專案。您可以執行 storybook migrate --list 來尋找可用的程式碼轉換清單。

例如，storybook@latest migrate csf-2-to-3 --dry-run 會檢查您的專案以驗證是否可以套用程式碼轉換，而不會進行任何變更，並提供您會受到影響的檔案報告。

選項包括

選項	描述
`-h`、`--help`	輸出使用方式資訊 `storybook migrate --help`
`-c`、`--config-dir`	要從中載入 Storybook 設定的目錄 `storybook migrate --config-dir .storybook`
`-n`、`--dry-run`	驗證移轉是否存在，並顯示將套用到的檔案 `storybook migrate --dry-run`
`-l`、`--list`	顯示可用的程式碼轉換清單 `storybook migrate --list`
`-g`、`--glob`	指定程式碼轉換 (codemods) 應套用的檔案 glob 模式 `storybook migrate --glob src/*/.stories.tsx`
`-p`、`--parser`	設定jscodeshift 解析器。可用的解析器包含 `babel`、`babylon`、`flow`、`ts` 和 `tsx` `storybook migrate --parser tsx`
`-r`, `--rename [from-to]`	重新命名受程式碼轉換影響的檔案，以包含提供的後綴 `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`

報告有關您環境的實用除錯資訊。在開啟問題或討論時提供資訊很有幫助。

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 功能。在開啟問題或討論時重現錯誤很有幫助。

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

例如，storybook@next sandbox 會使用 Storybook 最新的預發布版本產生沙箱。

framework-filter 引數是選用的，可以篩選可用的框架清單。例如，storybook@next sandbox react 將只提供產生基於 React 的沙箱。

選項包括

選項	描述
`-h`、`--help`	輸出使用方式資訊 `storybook sandbox --help`
`-o`, `--output [dir-name]`	設定沙箱專案的位置 `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。