Storybook 生态系统 CI

升级 npm 包有点像穿越雷区。即使是微小的补丁升级也可能导致你的整个堆栈崩溃。不幸的是，这类问题在现代开源软件中很常见。包经常由于自身代码中的 Bug、依赖项中的 Bug 或不兼容的传递依赖升级而中断。

作为 Storybook 的维护者——它是最流行的 UI 开发工具之一——我们非常清楚包升级带来的麻烦。这就是为什么我们创建了 **Storybook 生态系统 CI**，一个早期预警系统，旨在帮助我们的用户免受这种混乱环境的影响。

• 🚥 公共状态页面，报告官方支持配置矩阵的状态
• ✅ 每次提交时运行的测试套件
• 🔔 通知系统，在我们出现严重故障时提醒我们

继续阅读，了解我们正在测试的内容以及它如何已经为提高 Storybook 的稳定性带来了回报。

等等，但为什么呢？

Storybook 处于软件开发中变化最快的领域之一，我们的用户期望我们能支持各种最新的版本。

前端生态系统变化很快。框架和库定期发布更新，新的构建工具不断涌现。由于 Storybook 支持的广泛配置范围，再加上它的所有功能，跟上这些变化并非易事。

Storybook 具有庞大的兼容性矩阵

• 10+ 渲染器: React, Vue, Angular, Web components, Svelte, Ember, HTML 等等
• 2 种语言: JS, TS
• 2 种构建器: Webpack, Vite
• 3 种包管理器: npm, yarn, pnpm
• 元框架，例如 NextJS, SvelteKit 等

另外，还有上述所有选项的各种版本 (React 16+, Vue2/3, npm6/7/8, TS 3+ 但同时也利用最新的 4.9 satisfies 特性，等等等等！😅)

你的项目使用了这些选项中的一个组合，例如 NextJS + React + Webpack + yarn。而 Storybook 支持项目配置的组合矩阵。

很难对 Storybook 进行重大更改并确保所有项目配置都能继续正常工作。Storybook 生态系统 CI 通过持续测试这个配置矩阵并及早发现问题来简化这个过程。它部分受到了 Vite 的生态系统 CI 的启发，后者值得一看。

状态页面

生态系统 CI 的核心是一个 公共状态页面。一个损坏的包对于使用该包的用户来说，类似于一次“服务中断”，我们正在努力最大化 Storybook 的“正常运行时间”。因此，我们从流行的状态面板中汲取了设计灵感

我们可视化中的每个“心跳”条都总结了针对广泛测试套件进行的每日 CI 运行。点击该条会显示哪些测试失败了，并为你提供一个链接，查看完整的 CI 运行以获取更多详细信息。

作为一名 Storybook 用户，或正在为你的项目评估 Storybook 的潜在用户，你可以查看你的配置是否受支持以及该配置近期的稳定性。

沙盒测试

我们测试每种配置的方式是创建一个沙盒。这是一个基于生成器脚本的新独立项目

'nextjs/default-js': {
  script: 'yarn create next-app nextjs-default-js --javascript --eslint',
}

我们的沙盒脚本会像用户一样安装 Storybook，添加一组故事，并运行一系列测试（Chromatic 快照，Storybook test-runner 和 Playwright e2e）。

当我们将故事转换为 组件故事格式 3 (CSF3) 时，我们发现可以编写不包含任何框架/渲染器特定代码的通用故事。例如

export default {
  // React/Vue/Angular/etc. component
  component: globalThis.components.Button,
}

export const Actions = {
  play: async ({ args, canvasElement }) => {
    await fireEvent.click(within(canvasElement).getByRole('button'));
    await expect(args.onSuccess).toHaveBeenCalled();
  },
};

这使我们能够可伸缩地测试新的框架（React, Vue, Angular, Web-components, Svelte 等），而无需为每个额外的配置重复代码/工作。

通知系统

我们测试了如此多的配置，以便一旦它们出现问题就能收到通知，无论是由于 Storybook 的更改还是更广泛生态系统的更新。受 Vite 自身生态系统 CI 的启发，我们实现了一个通知系统，每当 CI 失败时就会发布到 Storybook Discord。

早期成果

生态系统 CI 在部署的几周内已经捕获了多次中断。有了生态系统 CI，我们在 CI 中有了失败的重现步骤，并且有了解决问题的流程。在大多数情况下，我们在 24 小时内修复了中断。

• Webpack: 当 Webpack 发布了 一个有问题的版本 的 enhanced-resolve 时，它导致所有安装/升级的 Storybook Webpack 用户受影响。Norbert de Langen 和 Yann Braga 与 Tobias Koppers 合作，后者在 24 小时内发布了 Webpack 的修复。
• Babel: 当 Babel 发布了 一个有问题的版本 的 @babel/plugin-transform-block-scoping 时，它导致所有安装/升级的 Storybook 用户受影响。Norbert de Langen 与 Nicolò Ribaudo 合作，后者在 24 小时内发布了 Babel 的修复。
• Vite: 当 Vite 发布其 v4 主要升级时，我们已经设置了生态系统 CI 来测试预发布版本。Ian VanSchooten 与 Vite 团队的 Dominik G. 和 Patak 合作发布了 Storybook 的修复。
• Angular: 当 Angular 发布其 v15 主要升级时，它在发布后几小时内就破坏了我们的 Angular 测试。Valentin Palkovic 与 Angular 团队的 Alan Agius 合作，找出相关的重大更改，并在中断发生后的 3 天内发布了 Storybook 的修复。

之前，这些中断会由社区通过 GitHub issues 报告，通常没有重现步骤，而且需要几天到一周的时间才能以临时方式解决。

参与其中

前端生态系统是多样化且不断变化的，很难跟上。Storybook 生态系统 CI 是我们系统性解决这一问题、为用户创造最佳体验的尝试。它由 Michael Arestad、Yann Braga、Tom Coleman、Norbert de Langen、Kasper Peulen、Michael Shilman（我！）以及 Storybook 团队的其他人共同创建。

生态系统 CI 目前正针对 Storybook 7.0 beta 版本运行。在你的项目中尝试使用 npx storybook@next init 来体验 beta 版本，或者按照 7.0 迁移指南升级现有的 Storybook。在 GitHub 上加入我们，或者在 Discord 上与我们聊天。最后，在 Twitter 上关注 @storybookjs 以获取最新消息。