Storybook 外掛

外掛套件	@rushstack/heft-storybook-plugin
外掛名稱	storybook-plugin 由 StorybookPlugin.ts 實作
外掛組態檔	(無)
heft.json 選項	IStorybookPluginOptions

這是用於使用 Storybook 框架的 Heft 外掛。

使用時機

如果已選取 Storybook 作為開發、測試和記錄 UI 元件的方法。

注意：此外掛最初是為 Storybook 6 開發的。嘗試使用較新版本進行設定的話，請參閱 此 Zulip 討論串 以了解解決方法和改進外掛的進行中工作。

運作方式

基本方法是讓 Heft 以正常方式執行 TypeScript 編譯，產生成為 Storybook 工具鏈輸入的 lib/**/*.js 檔案。Heft 外掛會找到 Storybook 啟動模組（例如 @storybook/react）並內部呼叫 Storybook 工具鏈。由於 Storybook 的工具鏈實作了其自己的 Webpack 開發伺服器，當提供 --storybook 參數時，Heft 自己的 Webpack 外掛會被抑制，以避免啟動兩個開發伺服器。

「storykit」套件

Storybook 藝廊是一個完整的複雜 Web 應用程式，由 Storybook 工具鏈建置。此工具鏈會帶來許多自己的 NPM 相依性，但由於它也會嘗試編譯專案的原始碼，因此它會嘗試找出並使用專案的 devDependencies，例如 React、Webpack 和相關的載入器。實際上，要混合所有專業工具鏈（例如 Heft）的相依性以及 Storybook 工具鏈和外掛的相依性在單一 node_modules 資料夾中相當困難。

為了解決這個問題，storybook-plugin 引進一種可以建立名為 storykit 的第二個 NPM 套件的模型，其 package.json 提供 Storybook 的所有建置工具相關性。如此一來，兩個工具鏈的相依性會清楚地分開，類似於配備，能輕鬆地在不同應用程式專案中重複使用 Storybook 設定。

可惜 Storybook 的瀏覽器 API 沒有分開到專屬的 NPM 套件中，而是由 Node.js 工具鏈套件（例如 @storybook/react）匯出。為了更明確的分離，您的 storykit 套件可以簡單地重新匯出此類 API。

設定檔

The[heft-storybook-react-tutorial]https://github.com/microsoft/rushstack-samples/tree/main/heft/heft-storybook-react-tutorial) 範例資料夾說明完整的專案設定。

heft.json 外掛選項

這個有說明的範本記錄 Heft 的 storybook-plugin 可用的選項

// OPTIONS FOR storybook-plugin
"options": {
  /**
   * (REQUIRED) Specifies an NPM package that will provide the Storybook dependencies for the project.
   *
   * Storybook's conventional approach is for your app project to have direct dependencies
   * on NPM packages such as `@storybook/react` and `@storybook/addon-essentials`.  These packages have
   * heavyweight dependencies such as Babel, Webpack, and the associated loaders and plugins needed to
   * build the Storybook app (which is bundled completely independently from Heft).  Naively adding these
   * dependencies to your app's package.json muddies the waters of two radically different toolchains,
   * and is likely to lead to dependency conflicts, for example if Heft installs Webpack 5 but
   * `@storybook/react` installs Webpack 4.
   *
   * To solve this problem, `heft-storybook-plugin` introduces the concept of a separate
   * "storykit package".  All of your Storybook NPM packages are moved to be dependencies of the
   * storykit.  Storybook's browser API unfortunately isn't separated into dedicated NPM packages,
   * but instead is exported by the Node.js toolchain packages such as `@storybook/react`.  For
   * an even cleaner separation the storykit package can simply reexport such APIs.
   */
  "storykitPackageName": "@my-corp/my-react-storykit",

  /**
   * The module entry point that Heft serve mode should use to launch the Storybook toolchain.
   * Typically it is the path loaded the `start-storybook` shell script.
   *
   * If you are using `@storybook/react`, then the startup path would be:
   *
   * "startupModulePath": "@storybook/react/bin/index.js"
   */
  // "startupModulePath": "",

  /**
   * The module entry point that Heft non-serve mode should use to launch the Storybook toolchain.
   * Typically it is the path loaded the `build-storybook` shell script.
   *
   * If you are using `@storybook/react`, then the static build path would be:
   *
   * "staticBuildModulePath": "@storybook/react/bin/build.js"
   */
  // "staticBuildModulePath": "",

  /**
   * The customized output directory for a Storybook static build.
   * If this setting is not specified, then the Storybook default output directory will be used.
   */
  // "staticBuildOutputFolder": "example/path"
}

CLI 參數

heft-storybook-plugin/heft-plugin.json 定義這些參數

  --storybook
                        Used by the "@rushstack/heft-storybook-plugin" package to launch
                        Storybook.