Storybook 5.0

欢迎来到组件开发的未来！

Michael Shilman

2019年3月5日 — @mshilman

最后更新 2020年10月9日

我们以 Storybook 5.0 (SB5) 开启2019年，这是我们迄今为止最大的版本。以下是它的内容：

🎨 完全重塑 Storybook 的开发者体验
💅 支持主题的组件库
🛠 演进的插件前端架构
🖼 全新的 Storybook 网站

继续阅读项目更新、改进概览和升级说明。

Storybook 的进展和后续计划

Storybook 是全球最受欢迎的 UI 组件工作台。它为 React、Vue、Angular、React Native 和 Ember 等所有主要视图层提供了结构化的 UI 开发、测试和文档能力。

📈 创纪录的采用率： Storybook 是 Airbnb、Slack、Squarespace、Lyft、Dropbox 等 UI 巨头的首选工具。在行业和开源项目中的采用率持续增长，最近每月 npm 下载量已突破450万次。

👩‍💻 蓬勃发展的社区： Storybook 社区最近贡献者数量超过 600人，Github star 数达到3.4万，使我们跻身 Javascript 项目 star 数前40名。社区比以往任何时候都更强大。为了指导项目走向未来，我们成立了一个由顶级维护者组成的指导委员会。

🛠 专业级工具： 在2018年，我们专注于构建 Storybook 平台：扩展视图层支持、插件跨兼容性以及与 JavaScript 工具同步发展。现在，在2019年，我们通过以下方式改进 开发者体验：

优先处理用户反馈
让 Storybook 可以按您想要的方式进行配置
通过更小、更频繁的版本发布来稳定平台

欢迎体验全新的 Storybook

SB5 的核心是一个漂亮的新用户界面。具有讽刺意味的是，对于这样一个广泛使用的 UI 开发工具，Storybook 本身在设计方面还有很多不足之处。Storybook 的新设计是项目启动以来的第一次重大改造。

新的用户界面解决了自2016年以来积累的用户反馈。它拥有：

🌓 支持亮色和暗色主题的新设计
🛠 画布工具栏，方便访问插件
🗺 全新的导航侧边栏，带有直观的菜单
🗜 重新设计的插件面板，带有方便的按钮来切换可见性和方向
⌨️ 改进的键盘快捷键，用户可配置
🌍 新的 URL 结构，消除了冗长的查询参数字符串

这些升级改进了视图层、插件和集成构成的整个 Storybook 生态系统。在认识 Storybook 的新设计中阅读更多关于此项目的信息。

UI 由 Dominic Nguyen 设计。由 Norbert de Langen、Dominic Nguyen、Tom Coleman、Jessica Koch、Alexandre Bodin 以及许多其他贡献者实现。

复用 Storybook 的组件

Storybook 是用 Storybook 构建的。我们正在发布 @storybook/components 库，以加速开发、推广最佳实践并“自食其狗粮”（dogfooding）我们的 UI 工作流程。这意味着插件开发者可以更快地构建与 Storybook UI 一致的插件。

Storybook Components 使用 React 和 Emotion 实现。该库包含 Storybook 界面的所有构建模块，专为桌面和移动设备打造，可通过 Emotion 灵活的主题 API 进行自定义。

发布该库实现了几个不同的目标

⚡️加速开发： 我们记录常见用例，自动化可视化测试，并促进代码复用
✨ 推广最佳实践： 我们的长期目标是让这个库成为如何在 Storybook 中构建良好文档设计的系统的闪亮典范。我们在这方面还有很长的路要走，但 SB5 是第一步。
🏗 改进工作流程： 我们“自食其狗粮”（dogfooding）。SB5 的许多改进都是在 Storybook 中构建我们自己的组件库的结果。

在 Storybook 的官方 Storybook 中查看该库，随着我们继续为 Storybook 社区构建这一资源，敬请期待更多文档。

根据您的需求定制 Storybook

Storybook 还拥有新的前端架构，以改进定制性。Storybook 一直提供可修改的插件和构建配置 API；现在 SB5 开始开放用户界面进行配置

主题 API

Storybook 中的主题化比以往任何时候都更容易、更一致、更好看。这得益于新的主题 API，它改进了4.0 版本中发布的先前 API。

Storybook 内置了手工制作的“亮色”和“暗色”主题。这些主题可以独立使用，也可以作为定制的起点。这里有一个简单的示例供您开始：

SB5 的主题系统被抽象为一组核心变量。这简化了开发人员的主题化工作，同时使 Storybook 的 UI 在演进过程中更容易保持向后兼容性。有关 SB5 主题化的更多信息，请参阅更新的主题化文档。

对于有冒险精神的主题作者，还有一个“逃生出口”，允许您修改底层的 Emotion 主题化 API。

插件 API

SB5 包含一个扩展的插件 API，为插件提供了两种新的 UI 钩子：工具栏 (Toolbar) 和 标签页 (Tab)。

工具栏 (Toolbar)： 插件现在可以将 UI 添加到……等等……工具栏中！！这使得用户可以发现并立即控制插件。Viewport、Backgrounds 和 A11y 插件都展示了这一新功能。
标签页 (Tab)： 插件还可以向主 stories 面板添加新的标签页，以在您的 stories 中嵌入替代视图。Notes 插件展示了这一功能，我们很快会构建更多创意的集成。

这些新的钩子只是我们如何在保持简单、精简的 API 的同时，向插件开放 SB5 的开始。

插件可以放置在易于访问的 `工具栏 (Toolbar)` 或改进的 `插件 (Addons)` 面板中

对于插件用户，SB5 中的安装和配置没有改变。对于对新 API 感兴趣的插件作者，请参考 Storybook 插件文档。

全新的网站

SB5 版本发布的点睛之笔是Storybook 的新网站。这个令人惊艳的网站阐述了 Storybook 最常见的优势——这些灵感来自于社区的聚会、讨论、演示和博客文章。‍

由 Dominic Nguyen 设计，并由 Igor Davydkin、Sacha Greif、orta 和 Aparajita Fishman 进行评审/QA。网站使用 Gatsby 实现，由 Dominic、Tom、Dale Blackburn、Lucas Carl 和 Chak Shun Yu 完成。这是一个关于如何在 Storybook 中系统地构建网站的绝佳参考。

“但我为什么需要 Storybook？”

用户经常问：为什么选择 Storybook？ Storybook 有许多用例：组件浏览器、样式指南、UI 文档、演练场、沙箱、工作坊和库。用例如此之多，以至于即使对于维护者来说也很难一口气说完。

我很高兴宣布一个新的介绍视频，它将一劳永逸地回答这个长期存在的问题。在不到两分钟的时间里，您将看到为什么独立的组件开发对于现代应用程序至关重要，以及Storybook 如何帮助您做到这一点。

这段精彩的介绍视频由 Daniel Egerev 制作动画，并由 Dominic Nguyen 指导。

升级到 Storybook 5.0

如果您正在运行 Storybook 4.x，升级到 5.0 很简单。我编写了一份5.0 升级指南来指导您完成。如果您使用的是 3.x，4.0 升级指南也会有所帮助。

如果您是 Storybook 的新手，请查看 Storybook 教程，了解 React/Angular/Vue 的分步指导。

或者如果您更喜欢直接开始，只需 30 秒即可将 SB5 添加到现有项目

cd my-project
npx -p @storybook/cli sb init
yarn storybook

感谢社区

Storybook 是由超过 600位社区提交者共同努力的成果，由顶级维护者组成的指导委员会进行组织。感谢在 Open Collective 上的慷慨捐赠，我们的年度预算为2万美元，用于基础设施、贡献者福利、文档和推广。

Storybook 5.0 包含了以下人员的代码贡献：@backbone87 @bertho-zero @dandean @domyen @donaldpipowitch @ebrearley @gabrielcsapo @gaetanmaisse @gbakernet @gongreg @greysteil @hypnosphi @igor-borisov @igor-dv @jessica-koch @jessidhia @jhummel @johot @jure @keraito @koenpunt @kroeder @kwm14 @kylemh @lauriejones @loklaan @maacky @manbeartm @marcobiedermann @martinmckenna @matteo-hertel @misund @mrmckeb @myoxocephalus @ndelangen @nitaking @pascalduez @petersendidit @pgoforth @pickra @piperchester @pksunkara @psyked @rwoverdijk @sayegh7 @sharils @shilman @tmeasday @tomraithel @web-padawan @wuweiweiwu

SB5 是我们第一次进行协调一致的RC（发布候选）流程。感谢所有测试和报告问题的人，特别要赞扬 MVP Alex Wilson 和 Leo Y. Li 对 SB5 进行了全面测试。

如果 Storybook 为您的 UI 开发流程带来了乐趣和效率，请考虑帮助改进 Storybook。无论您是贡献本文中描述的新功能，还是修复错误，抑或帮助改进文档，每个版本的发布都伴随着大量的工作。在 Discord 上加入我们，在 Open Collective 上支持我们，或者直接参与 Github。

有问题或赞美？欢迎在 Twitter、Discord、Github 上打招呼，或在下方评论。请 👏 为此文章鼓掌并分享，帮助更多人发现它。