返回博客

Storybook 8 Beta

主要的兼容性和性能改进

loading
Michael Shilman
@mshilman
最近更新
🚀
3月12日更新:Storybook 8 现已发布

Storybook 8 Beta 版现已开放试用! 这个最新版本延续了 Storybook 的使命,为您提供即时启动、无缝的前端开发环境。查看发布亮点,立即试用 Beta 版!

🚀 主要性能改进
🆕 全新的可视化测试工作流程
📱 优化的移动端 UI
🔬 改进的测试工具
⚛️ React Server Components 支持
👋 告别 React 依赖
🧩 生态系统更新
💯 数百项修复

主要性能改进

Storybook 8 的首要任务是提高 Storybook 的兼容性和性能。

  • 我们将新项目的默认编译器从 Babel 切换到 SWC (Speedy Web Compiler)。SWC 比 Babel 快得多,但我们将继续在当前使用 Babel 的任何项目中支持 Babel。
  • 对于 React 项目,我们现在使用 react-docgen 自动生成控件。即使对于小型项目,这也将 Storybook 的启动时间缩短了高达 20%!
  • 我们添加了一个新的 --test 标志,用于更快的测试构建,绕过不必要的流程(如文档编译)。这使静态构建速度提高了三倍。 了解更多

可视化测试工作流程

Storybook 赋予您使用故事作为测试用例的超能力。您可以比较代码更改前后的故事,并标记差异以供审查,而无需推送提交。

为了改进这一流程,我们在 2017 年推出了一个名为 Chromatic 的可视化测试平台,这是一种云服务,可让您通过比较每次更改前后故事的快照来自动化可视化测试。

Storybook 8 通过 可视化测试插件 缩小了 Chromatic 和 Storybook 之间的差距,该插件允许您即时运行故事的 可视化回归测试,而无需提交更改。然后,您可以在 Storybook 中检查结果,或将测试用例推送到 Chromatic 以获取更多调试工具。您每月可免费获得多达 5,000 个快照,并且可以通过 Chromatic 升级以获得更多使用量。

Visual Tests Addon enabled in Storybook

作为今天发布的一部分,@chromatic-com/storybook 现已推出公开 Beta 版。立即前往 Chromatic 的文档试用。

优化的移动端 UI

Storybook 8 改进了 Storybook 的移动端 UI。在移动设备上,Storybook 的侧边栏和插件面板现在出现在屏幕底部。这可以防止画布缩小,并使您更容易用拇指导航。我们还修复了一个长期存在的、超级烦人的响应性错误,即在桌面和移动视图之间转换时 UI 状态会丢失。

Storybook 8’s mobile UI

最后,我们刚刚发布了新版本的 React Native StorybookRN Storybook 7。它带来了主要的性能和兼容性改进,包括自动故事加载、改进的错误处理、更强的类型等等。

改进的测试工具

Jest, testing-library, and Storybook

Storybook 8 将两个现有的测试包(@storybook/jest@storybook/testing-library)精简为一个更强大的测试库:@storybook/test。它基于 Vitest spies 和 expect,它们在您的项目中安装 footprint 更小。 了解更多

React Server Components

Storybook + Next.js

许多人询问 Storybook 何时会支持 React Server Components。Storybook 8 就是答案,它包含实验性的 RSC 支持,最初仅限于 Next.js 项目。

为什么是实验性的?我们仍在研究构建 RSC 组件和页面的最佳实践。我们还需要证明我们的方法可以与其他 RSC 框架(如 Waku)良好协作。

了解更多关于 Storybook 8 中的 RSC 支持以及 如何使用 Storybook 8 隔离构建 RSC 应用的信息。

告别 React 依赖!👋

在 Storybook 7 中,我们添加了一个 React 对等依赖项,以使 Storybook 能够与现代包管理器(如 pnpm 和 Yarn PnP)一起使用。我们将包管理器兼容性放在首位,但坦率地说,这对 Vue、Angular、Web-components 和 Svelte 用户来说很糟糕。这与我们让所有框架的用户在 Storybook 中感到宾至如归的首要目标之一相冲突。

Storybook 8 通过更智能的捆绑消除了 React 依赖。它为非 React 用户带来了一系列生活质量的改进奠定了基础,您可以在 Storybook 8 及更高版本中期待这些改进。

大家好,生态系统!

每个主要版本都是 Storybook 跟上生态系统的机会。

Storybook 8 包括以下依赖项更改

  • 将 Node 要求提升至 18+
  • 添加 Vite 5 和 Lit 3 支持
  • 升级 MDX、prettier、eslint 和 remark
  • 放弃对 Vue 2、Svelte 3、Angular 14 和 Next <13.5 的支持
  • 放弃官方 Yarn 1 支持(它仍然有效,只是不受支持)

此外,我们放弃了对 Storyshots 的支持,并提供了 升级指南以过渡到其他选项。我们还放弃了对旧版 storiesOf 故事 API 的支持。

今天就试用 Storybook 8

今天使用以下命令升级到 Storybook 8 Beta 版

npx storybook@next upgrade

我们仍在努力自动化升级的某些方面。但与此同时,我们提供了 迁移指南来帮助填补空白。

参与进来

在全面发布之前,我们希望您能帮助我们进行 Storybook 8 的实战测试和质量保证,以帮助我们发布尽可能最好的版本。

如果您有兴趣参与我们的开源项目,我们很乐意您帮助解决 GitHub 上的以下一些问题

我们还将在未来几周内分享更多关于您如何参与社区 QA 的信息,所以请密切关注我们在 Twitter 和 LinkedIn 上的社交媒体动态。

加入 Storybook 邮件列表

获取最新的新闻、更新和发布

6,730位开发者以及更多

我们正在招聘!

加入 Storybook 和 Chromatic 背后的团队。构建被数十万开发者在生产环境中使用的工具。远程优先。

查看职位

热门文章

Storybook 的可视化测试插件进入 Beta 阶段

在 Storybook 内部捕获视觉变化,而无需依赖 CI
loading
Joe Vaughan

通过 Volar 和 Storybook 8 提供一流的 Vue 支持

显著改进了使用 Vite 的 Vue Storybook 的文档和控件
loading
Joe Vaughan

React Native Storybook 7

使 React Native 和核心 Storybook 比以往任何时候都更加紧密地结合
loading
Daniel Williams
加入社区
6,730位开发者以及更多
为什么为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与进来博客
案例展示探索项目组件术语表
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI