Storybook 6.2

Storybook 是用于组件和页面的行业标准 UI 开发工作台。它被 Netflix、Slack、Target、Shopify、Stripe 以及全球数千个团队使用。

作为一名现代前端开发者，你需要不断地跟上生态系统变化的脚步。Storybook 的每个版本都包含数百项改进，旨在让你更容易应对这些变化，无论你是在升级库还是从一个框架迁移到另一个框架。

Storybook 6.2 是面向未来 UI 开发工作流程的巨大飞跃，包含了重大的改进和新功能。

• 🚀 框架：Vue 3，Svelte 原生 Story 格式
• 📦 包管理：NPM 7，Yarn 2，ESM
• 🛠 打包工具：Webpack 5，可插拔的 Vite，ESBuild，和 Snowpack
• 🎛 Controls 更新，新增 JSON 编辑器、颜色选择器和 URL 参数
• 💯 数百项其他改进

下一代框架：Vue 3，Svelte

Storybook 支持所有主要的 Web 框架：React、Vue、Angular、Web Components、Svelte、Ember 以及十多种其他框架。我们的目标是为每个框架提供一流的开发者体验，但这并不容易。幸运的是，我们正朝着这个目标迈进一大步。

Vue 3. Storybook 对 Vue 3 的支持是针对 Vue.js 最新主要版本进行的彻底重写。Vue 3 具有更好的工效学设计、更高的性能以及用于管理大型应用的新 API。现在 Storybook 也提供了支持。了解更多：Storybook 对 Vue 3 的支持。

Svelte. Storybook 对 Svelte 的支持得到了增强，新增了用于编写 stories（组件示例）的 Svelte 原生 API。它还获得了全面的改进，例如更好的自动文档生成和装饰器支持。了解更多：Storybook 对 Svelte 的支持。

这些投入不仅对 Vue 和 Svelte 社区意义重大，对 Storybook 整体也同样重要。这项工作定义了“一流”框架支持的含义，进而使在后续框架中实现这一目标变得更容易。例如，Storybook 6.3 将支持 Angular Ivy，并且许多 Web Components 的改进也在进行中。

包管理的未来：npm 7，Yarn 2，ESM

还记得 Yarn 2 横空出世，给 JavaScript 生态系统带来了冲击吗？现在 npm 7 也引发了不小的波澜。变化很难，但我们正努力驾驭这股浪潮。

Yarn 2. Storybook 完全兼容 Yarn 2 PnP。我们还更新了一些依赖以实现兼容性。我们喜爱 Yarn，并很高兴能帮助推动该项目向前发展。

npm 7. npm 7 处理 peer dependencies 的方式与之前完全不同，不幸的是 Storybook 依赖于旧的语义。短期内，我们已通过修补来解除用户的阻碍。长期来看，我们正在重构依赖结构以更好地支持 npm 7。

ESM. 除了包管理器支持外，我们还在转向 ECMAScript 模块 (ESM)，它可以促进打包工具的 tree-shaking，并能被现代浏览器高效异步地加载。由于 6.2 是一个次要版本更新，我们同时提供 ESM 和 CommonJS (CJS) 打包。我们计划在 Storybook 7.0 中移除 CJS。

打包工具的未来：Webpack 5，Vite，Snowpack，...

最后但同样重要的是，当今 JavaScript 领域最大的变化是打包工具。打包工具是前端工具链的基础，因此新的打包工具带来了新的挑战和机遇。别担心，Storybook 已为你做好准备。

Webpack 5. Webpack 是最受欢迎的打包工具，v5 是 Webpack 多年来最大的升级，带来了基础性能改进和用于分布式发布的模块联邦等新功能。Storybook 6.2 中的实验性 webpack5 支持是可选加入的。

可插拔的构建器。6.2 还包含一个可插拔的构建器抽象层，这为支持 Vite、Snowpack、ESBuild 等新的打包工具打开了大门。这个 API 仍处于早期阶段，但我们正在积极努力，以使 Storybook 能够应对这些重大变化、面向未来。

有关这些变化的更多信息，请阅读关于Storybook 对 Webpack 5 的支持的特写文章。

Controls 插件全面改进

除了上面提到的所有内容，Storybook 的其他部分也在不断改进。改进最大的领域是 Controls：用于在 Storybook 中操作组件示例的自动生成 UI。

Controls 现在包含一个精心制作的 JSON 编辑器和颜色控件

它们现在还支持不可 JSON 序列化的复杂数据类型，例如函数、React 元素或 BLOB。

argTypes: {
  label: {
    options: ['Normal', 'Bold', 'Italic'],
    mapping: { Bold: <b>Bold</b>, Italic: <i>Italic</i> },
  },
}

它们甚至可以同步到你的 story URL，以便更容易地分享动态设置并与端到端测试集成。

我们还使指定匹配器成为可能，这些匹配器有助于 Storybook 为 Date 和 color 等非标量数据类型推断控件

export const parameters = {
  controls: {
    matchers: { color: /(background|color)$/i, date: /Date$/ },
  },
};

简而言之，我们正在加倍投入 controls，以打造一个一流的游乐场，用于探索组件状态。我们计划在未来的版本中继续推进这一演进！

还有更多

Storybook 在各个层面都在不断改进。6.2 的其他亮点包括

• ✅ React 测试工具集（与 Testing Library 和 Jest 配合使用）
• ✅ 支持 PostCSS 8
• ✅ 可定制的侧边栏导航
• ✅ 插件工具包 & 创建插件教程
• ✅ 插件目录

6.2 包含了数百项其他的修复、功能和微调。查看匹配 6.2.0-* 的更新日志以获取完整的更改列表。

1 分钟安装

将现有 Storybook 项目升级到 6.2

npx sb upgrade

如果你从 5.x 或更早版本升级，请查看Storybook 6 迁移指南。

或者，对于全新安装，可以将 Storybook 集成到现有应用中

npx sb init

加入我们

专业的 UI 开发者每天都依赖 Storybook。当你采用 Storybook 时，你会对其能够与最新的生产就绪工具配合使用充满信心。

该项目由 1,250 多名开源贡献者维护，并由一个由顶级维护者组成的指导委员会指导。如果你有兴趣贡献，请在 GitHub 上查看 Storybook，创建 issue，或提交 pull request。在 Open Collective 上捐赠。在 Discord 中与我们聊天 — 通常会有维护者在线。在 Twitter 上以及通过订阅我们的邮件列表来及时了解 Storybook 的最新消息。

来自社区的实用资源

• Tailwind 和 Storybook 教程 by John Clarke
• Testing Library 和 Storybook  by Jimmy Cleveland
• 如何在不费吹灰之力的情况下测试 400+ 组件 by Lior Heber
• Ionic (Vue) 和 Storybook by Aaron Saunders
• Svelte 和 Storybook by Mark Volkmann

致谢

Storybook 6.2 由以下贡献者提供。

• Vue 3 支持由 Blaine Bublitz 开发，并得到了 Sasan Farrokh、andoshin11、Rafael Milewski 和 Lee Chase 的帮助。
• Svelte 支持在 6.2 中由 Jérémie Brébec 进行了全面改进，并得到了 Ernie Francis 的帮助。
• Yarn 2 支持由 Gaëtan Maisse 添加，并得到了 Kristoffer K 和 Maël Nison 的帮助。
• NPM 7 临时解决方案由 Michael Shilman (我!) 添加。
• ESM 支持由 Norbert de Langen 添加。
• Webpack 5 支持由 Norbert de Langen 和 Michael Shilman (我!) 添加，并得到了 Tobias Koppers、Zack Jackson 和 Clement Dungler 的帮助。
• Controls 的改进由 Gert Hengeveld 添加，并得到了 Cameron Yick、Yann Braga、Ev Haus、Tom Coleman、Michael Shilman (我!) 的帮助。

@43081j @7rulnik @acdzh @andrefarzat @andyrichardson @arcanis @bodograumann @cmrn @commenthol @cone56 @crixx @cyberstrike @daleseo @dominictwlee @domyen @doublejosh @dschungelabenteuer @earshinov @eirslett @emclaug2 @eric-burel @etlovett @evhaus @fabiansellmann @fredx87 @gabiseabra @gaetanmaisse @geisterfurz007 @ghengeveld @gregorynative @guilhermewaess @horusgoul @hypnosphi @iamandrewluca @imgbotapp @j3rem1e @jakubriedl @jamesgeorge007 @jonniebigodes @ka2jun8 @kuschti @kylegach @leettaylor @livthomas @lwyj123 @maael @mandarini @marksy @maslade @matamatanot @matheo @micahgodbolt @murtukov @ndelangen @nishargshah @oanaom @oscard0m @pascaloliv @patricklafrance @penguinofwar @phaistonian @phated @philipbordallo @philsawicki @phunkren @pocka @profanis @qoalu @rolias @russellwpatterson @ryanml @saschwarz @scooooooooby @selrond @shilman @teimurjan @thebuilder @themightypenguin @thibaudav @thomasvaeth @tmeasday @tomastomaslol @tooppaaa @tskarhed @urish @visualfanatic @vkrol @winkervsbecks @wkich @yannbf @yngvebn @yozhezhi @yutasugimura @zraineri