
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,这对我们的 React 用户来说是个好消息,他们每月总共下载 @storybook/react
超过 300 万次。
The 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