
Storybook 8 Beta
主要的兼容性与性能改进

Storybook 8 Beta 版现已开放试用! 此最新版本延续了 Storybook 的使命,旨在为您提供即时、无缝的前端开发环境。查看版本亮点并立即试用 Beta 版!
🚀 主要性能改进
🆕 视觉测试流程
📱 优化的移动端 UI
🔬 改进的测试工具
⚛️ 支持 React Server Components
👋 再见,React 依赖项!
🧩 生态系统更新
💯 数百项修复
主要性能改进
Storybook 8 的首要任务是提高 Storybook 的兼容性和性能。
- 我们将新项目的默认编译器从 Babel 切换到 SWC(Speedy Web Compiler)。SWC 比 Babel 快得多,但我们将继续支持目前使用 Babel 的项目。
- 对于 React 项目,我们现在使用
react-docgen
自动生成控件。即使是小型项目,这也可将 Storybook 的启动时间缩短高达 20%! - 我们添加了一个新的
--test
标志,用于加快测试构建速度,绕过文档编译等不必要的过程。这将静态构建速度提升了三倍。了解更多。
视觉测试流程
Storybook 赋予您将 stories 用作测试用例的超能力。您可以比较代码更改前后的 stories,并标记差异以供审查,而无需提交。
为了改进这一过程,我们在 2017 年推出了一个名为 Chromatic 的视觉测试平台,这是一种云服务,您可以通过比较每次更改前后 stories 的快照来自动执行视觉测试。
Storybook 8 通过 Visual Tests 插件弥合了 Chromatic 和 Storybook 之间的差距,该插件允许您即时运行 视觉回归测试 的 stories,而无需提交更改。然后,您可以在 Storybook 中检查结果,或将测试用例推送到 Chromatic 以获取更多调试工具。您可以免费获得每月最多 5,000 个快照,通过升级 Chromatic 可以获得更多用量。

作为今日发布的一部分,@chromatic-com/storybook
现已提供公开 Beta 版本。立即前往 Chromatic 文档试用。
优化的移动端 UI
Storybook 8 重塑了 Storybook 的移动端 UI。在移动设备上,Storybook 的侧边栏和插件面板现在显示在屏幕底部。这可以防止画布缩小,并使您更轻松地使用拇指导航。我们还修复了一个长期存在的、非常 烦人的响应性 bug,即在桌面视图和移动视图之间切换时 UI 状态会丢失。

最后,我们刚刚发布了新版本的 React Native Storybook:RN Storybook 7。它带来了重大的性能和兼容性改进,包括自动加载故事、改进的错误处理、更强的类型支持等等。
改进的测试工具

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

许多人一直在问 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
Story API 的支持。
立即试用 Storybook 8
立即使用以下命令升级到 Storybook 8 Beta 版
npx storybook@next upgrade
我们仍在努力自动化升级过程中的某些方面。但与此同时,我们提供了一份 迁移指南 来帮助填补空白。
参与其中
在正式发布之前,我们希望得到您的帮助来对 Storybook 8 进行实战测试和 QA,以帮助我们发布尽可能好的版本。
如果您有兴趣参与我们的开源项目,我们非常欢迎您帮助解决 GitHub 上的以下一些问题。
我们将在未来几周内分享更多关于如何参与社区 QA 的信息,请关注我们在 Twitter 和 LinkedIn 上的社交媒体动态。
重磅新闻:Storybook 8 Beta 版现已推出!
— Storybook (@storybookjs) February 6, 2024
🚀 主要性能改进
🔬 storybook/test
⚛️ 支持 React Server Components
🖼️ 一键视觉测试
🚚 不再有 React 对等依赖项
📱 重塑的移动端 UI
💯 数百项修复https://#/BmLNkX4DMk
🧵🧵🧵