Storybook 生态系统 CI

升级 npm 软件包可能有点像穿越雷区。即使是很小的补丁升级也可能炸毁你的整个堆栈。不幸的是，这种问题在现代开源软件中很常见。软件包经常因为代码中的错误、依赖项中的错误或不兼容的传递依赖项升级而崩溃。

作为 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 问题报告，通常没有重现步骤，并且需要几天到一周的时间才能以临时的方式解决它们。

参与进来

前端生态系统是多样且不断变化的，并且很难跟上步伐。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 以获取最新消息。