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. Vue 3 版 Storybook 是为 Vue.js 最新主要版本从头开始重写的。Vue 3 具有更好的人体工程学、更好的性能以及用于管理大型应用的新 API。现在 Storybook 也支持 Vue 3 了。阅读更多：Vue 3 版 Storybook。

Svelte. Svelte 版 Storybook 通过新的 Svelte 原生 API 进行了增强，用于编写 story（组件示例）。它还进行了从上到下的改进，例如更好的自动文档和装饰器支持。阅读更多：Svelte 版 Storybook。

这些投入不仅对 Vue 和 Svelte 社区有利，而且对整个 Storybook 都有利。这项工作定义了“一流”框架支持的含义，反过来也使得在后续框架中更容易实现。例如，Angular Ivy 支持即将加入 SB 6.3，并且正在进行大量 Web 组件的改进工作。

打包的未来：npm 7, Yarn 2, ESM

还记得 Yarn 2 出现并从 Javascript 生态系统中抽走地毯的时候吗？现在 npm 7 又引起了轰动。改变是困难的，但我们正在努力乘风破浪。

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

npm 7. npm 7 处理对等依赖的方式完全不同，不幸的是，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 多年来最大的升级，具有基础性的性能改进和新功能，例如用于分布式发布的模块联邦。实验性的 webpack5 支持在 Storybook 6.2 中是可选加入的。

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

有关这些更改的更多信息，请阅读关于 Webpack 5 的 Storybook 功能文章。

Controls 插件大改版

除了上面提到的一切之外，Storybook 的其余部分也在改进。最大的改进领域是 Controls：自动生成的 UI，用于在 Storybook 中操作您的组件示例。

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 的最新消息。

来自社区的有用资源

• John Clarke 撰写的 Tailwind 和 Storybook 教程
• Jimmy Cleveland 撰写的 Testing Library 和 Storybook 教程
• Lior Heber 撰写的《如何轻松测试 400 多个组件》
• Aaron Saunders 撰写的 Ionic (Vue) 和 Storybook 教程
• Mark Volkmann 撰写的 Svelte 和 Storybook 教程

鸣谢

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