Storybook 插件

插件包	@rushstack/heft-storybook-plugin
插件名称	storybook-plugin 由 StorybookPlugin.ts 实现
插件配置文件	(无)
heft.json 选项	IStorybookPluginOptions

这是一个用于使用 Storybook 框架的 Heft 插件。

何时使用它

如果您选择 Storybook 作为开发、测试和记录 UI 组件的方法。

注意: 此插件最初是为 Storybook 6 开发的。如果您尝试将其与更新的版本一起设置，请参阅 此 Zulip 线程 以了解解决方法和改进插件的持续工作。

工作原理

基本方法是 Heft 以正常方式执行 TypeScript 编译，生成 lib/**/*.js 文件，这些文件成为 Storybook 工具链的输入。Heft 插件定位 Storybook 启动模块（例如 @storybook/react）并在进程中调用 Storybook 工具链。由于 Storybook 的工具链实现了它自己的 Webpack 开发服务器，当提供 --storybook 参数时，Heft 自己的 Webpack 插件将被抑制以避免启动两个开发服务器。

"storykit" 包

Storybook 画廊是一个完整的复杂 Web 应用程序，由 Storybook 工具链构建。此工具链带来了许多自己的 NPM 依赖项，但由于它也尝试编译项目的源代码，因此它尝试发现并使用项目的 devDependencies，如 React、Webpack 和相关的加载器。在实践中，对于单个 node_modules 文件夹来说，将专业工具链（如 Heft）的所有依赖项与 Storybook 的工具链和插件的所有依赖项混合在一起，相当笨拙。

为了解决这个问题，storybook-plugin 引入了一个模型，您可以在其中创建一个名为 storykit 的第二个 NPM 包，它的 package.json 提供了 Storybook 的所有工具依赖项。通过这种方式，两个工具链的依赖项被干净地分离，并且您可以轻松地在不同的应用程序项目中重复使用 Storybook 设置，类似于 rig。

Storybook 的浏览器 API 遗憾的是没有被分离到专用的 NPM 包中，而是由 Node.js 工具链包（如 @storybook/react）导出。为了更干净地分离，您的 storykit 包可以简单地重新导出这些 API。

配置

该[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.