
Storybook 4.1:极速
速度提升高达 300%,兼容性,便捷性

Storybook 是世界上最受欢迎的 UI 组件工坊,深受 Airbnb、Github、Slack 和 Lyft 等工程团队的信任。紧随 Storybook 4.0 版本的盛大发布之后,我们激动地发布 Storybook 4.1。这一次,我们将重点放在
- ⚡️ 性能: 全新架构,启动速度提升高达 300%
- 🔌 兼容性: 支持 React 15.x+ 的任何版本,完全兼容 CRA
- 🔀 便捷性: 全新插件,可动态更新 CSS 资源
⚡️ 性能架构
Storybook 4.1 引入了 Norbert de Langen 的一项关键改进,使 Storybook 在冷启动和重新加载时速度提升高达 300%。

性能提升归功于架构更新,该更新将 Storybook 的预览和管理器拆分为两个独立的进程
- 🖼 预览 是显示你的故事的区域
- 🛠 管理器 是用于在故事之间导航、插件等的封闭式 UI。
这是一项基础性的改进,意味着我们可以固定管理器中运行的 React 版本,并使用 Webpack DLL 插件“预编译”管理器 UI 的大部分。这在 4.1 中实现了惊人的性能提升,并为未来的优化打开了大门。
🔌 React 15.x+ 支持
预览/管理器分离的第二个好处是能够使用 React 15+ 运行 Storybook,这对我们每月总共下载 @storybook/react
超过 300 万次的 React 用户来说是个好消息。
Storybook 4.0 版本依赖于 React 16.3+ 的“react context”。这意味着如果你被旧版本的 React 卡住,你也只能使用 Storybook 3.x。
现在 Storybook 的管理器和预览在单独的进程中运行,管理器可以依赖它需要的任何版本的 React,而预览(运行用户的组件)可以使用不同版本的 React。
Storybook 可以走在技术前沿,而不会破坏那些停留在旧版本上的应用程序。
🔌 create-react-app
现在在 Storybook 4.1 中,你可以使用 create-react-app
的所有功能,包括 Typescript 支持,而无需任何自定义配置,这要感谢 Igor Davydkin、Brody McKee 和 Chad Fawcett。
这项工作是由网络传奇人物 Dan Abramov 和 Brad Frost 之间一次戏剧性的推文交流引发的
关于现代开发工作流程,我最喜欢的事情之一就是尝试在我的网页上添加一个图标,然后在命令行中花费接下来的 4 个小时与项目依赖项作斗争。
— Brad Frost (@brad_frost) 2018年11月20日
也许我们应该从 CRA 文档中删除 @storybookjs? 当它被添加时,计划是保持功能同步。 这对我们的用户来说非常令人困惑。
— Dan Abramov (@dan_abramov) 2018年11月22日
Igor 从不回避挑战,很快就解决了这个问题,使 Storybook 既开箱即用兼容又具有面向未来的特性
我们上线啦!💥 @storybookjs 现在使用 CRA2 webpack/babel 配置(如果可用),使我们兼容且在合理程度上具有面向未来的特性。 🙌@IgorDavydkin 做出了巨大的贡献:https://#/KkBssu8jk6
— Michael Shilman (@mshilman) 2018年11月25日
感恩节快乐,各位!!! 🦃
现在这才是优质的客户服务!
🔀 动态 CSS
最后,Storybook 4.1 包含了 Neville Mehta 全新的 CSS Resources 插件。现在你可以轻松地在运行时切换 CSS 版本,这对于主题化或简单地探索替代组件样式非常有用

有关如何使用 CSS Resources 插件的更多信息,请参阅 项目 README。
升级到 Storybook 4.1
如果你正在运行 Storybook 4.0,升级到 4.1 应该非常容易。如果你正在使用 3.x,我们提供了 4.0 升级指南来帮助你。
如果你是 Storybook 的新手,请查看 Storybook 教程,了解 React/Angular/Vue 的分步演练。或者直接在你自己的项目中开始使用
cd my-project
npx -p @storybook/cli sb init
yarn storybook
参与贡献
有疑问或想点赞?在 Twitter, Discord, Github, Slack 上或在下面的评论中打个招呼。请 👏 为这篇文章鼓掌并分享,以帮助更多人发现它
感谢社区
Storybook 是超过 550 位社区贡献者的共同成果,并由顶尖维护者的 指导委员会发布。 还要感谢在 Open Collective 上的慷慨捐赠。 Storybook 4.1 包含以下人员的代码贡献: @454de6e @adamraider @alex-fournier @atekon @bartwaardenburg @bertho-zero @cfleschhut @chadfawcett @chilicoder @chris-lock @cosmith @cyruszei @dandean @dumbnickname @elucaswork @emilio-martinez @eps1lon @ewolfe @gabrielcsapo @gaetanmaisse @geoffreyd @gongreg @hipstersmoothie @hmelenok @hypnosphi @igor-dv @inversion @jamiemason @jfgreffier @jrwebdev @keraito @kroeder @kwm14 @lflpowell @libetl @lucianbuzzo @mansoorbashabellary @mark-schaal @miquelmasrieramrf @mohamedmansour @motleydev @mrmckeb @myoxocephalus @ndelangen @niku @nm123github @noriste @okamuuu @pksunkara @plrthink @quetzaluz @ranyitz @ravikishorethella @robincsl @shaminmeerankutty @shilman @snyk-bot @spawnia @stephanemw @stevehanson @tarikhamilton @tobiasljungstrom @transitive-bullshit @wuweiweiwu @ximenean @xogeny @y-nk