使用 Storybook 与 Angular 和 Vite 🎨

Storybook 是一个用于单独构建 UI 组件和页面的前端工作台。

默认情况下，Angular 和 Storybook 使用 Webpack 来构建和提供 Storybook 应用程序。Angular 已经切换到使用 Vite 作为开发服务器，因此你可能希望在开发工作流的其他部分也使用 Vite。

这篇帖子将引导你完成使用 Vite 构建和提供 Storybook 的过程，适用于任何使用 Storybook 的 Angular 项目。

如果你还没有设置好Storybook，运行以下命令来为你的项目初始化Storybook：

    npx storybook@latest init --type angular

进入全屏模式 退出全屏模式

这会安装必要的Storybook依赖，并设置一个包含几个示例组件的Storybook。

按照提供的提示，提交你的更改。

接下来，使用您喜欢的包管理器安装 AnalogJS 的 Vite 插件和 Storybook 的 Vite 构建器：

    npm install @analogjs/vite-plugin-angular @storybook/builder-vite --save-dev

进入全屏模式 退出全屏模式

更新 .storybook/main.ts 文件以使用 @storybook/builder-vite，并添加 viteFinal 配置函数来配置 Angular 的 Vite 插件。

    import { StorybookConfig } from '@storybook/angular';
    import { StorybookConfigVite } from '@storybook/builder-vite';
    import { UserConfig } from 'vite';

    const config: StorybookConfig & StorybookConfigVite = {
      // 其他配置、插件等
      core: {
        builder: {
          name: '@storybook/builder-vite',
          options: {
            viteConfigPath: undefined,
          },
        },
      },
      async viteFinal(config: UserConfig) {
        // 将自定义配置合并到默认配置中
        const { mergeConfig } = await import('vite');
        const { default: angular } = await import('@analogjs/vite-plugin-angular');

        return mergeConfig(config, {
          // 将依赖项添加到预优化中
          optimizeDeps: {
            include: [
              '@storybook/angular',
              '@storybook/angular/dist/client',
              '@angular/compiler',
              '@storybook/blocks',
              'tslib',
            ],
          },
          plugins: [angular({ jit: true, tsconfig: './.storybook/tsconfig.json' })],
        });
      },
    };

进入全屏模式 退出全屏模式

如果存在，删除现有的 webpackFinal 配置函数。

接下来，更新 package.json 以直接运行 Storybook 命令。

    {
      "name": "my-app",
      "scripts": {
        "storybook": "启动 Storybook 并使用端口 4400",
        "build-storybook": "构建 Storybook"
      }
    }

进入全屏模式 退出全屏模式

你也可以在 angular.json 中删除 Storybook 目标配置

如果你使用的是Nx，更新你的project.json文件中的storybook目标，以运行Storybook命令：

        "storybook": {
          "executor": "nx:run-commands",
          "options": {
            "cwd": "apps/my-app",
            "command": "storybook dev --port 4400"
          }
        },
        "build-storybook": {
          "executor": "nx:run-commands",
          "options": {
            "cwd": "apps/my-app",
            "command": "storybook build --output-dir ../../dist/storybook/my-app"
          }
        }

进入全屏模式 退出全屏模式

如果必要，将 /storybook-static 文件夹添加到你的 .gitignore 文件中。

直接运行 storybook 命令来启动开发服务器。

    npm run storybook

进入全屏模式 退出全屏模式

运行 storybook 的构建命令。

    npm run build-storybook

进入全屏模式 退出全屏模式

Storybook 是一个很好的工具，可以在将组件集成到应用程序之前独立构建和迭代组件。

如果你喜欢这篇帖子，点击 ❤️ 让更多人看到它。关注我在 X 的动态，并订阅我的 YouTube 频道 获取更多精彩内容！