Storybook 5.3

Storybook 的初衷很简单：帮助开发者构建 UI 组件及其关键状态。这是思考组件层级结构最简单、最有效的方式。

我们完善了这个工作流程，因此，Storybook 现在已成为行业内团队（如 Airbnb、Lyft、Slack、Twitter 以及数千家其他公司）的首选工具。

然而，UI 开发的标准也提高了。在 2020 年，仅仅为构建和测试组件提供出色的工具是不够的。当今的现代前端团队还需要将他们的组件文档化并打包成可重用的设计系统。

Storybook 一直在快速发展以应对这一挑战。现在，我很高兴地宣布我们的最新版本 — Storybook 5.3 大大增强了构建和文档化生产级设计系统的能力

• 📝 使用 MDX 编写 stories 和文档，这是混合使用 Javascript 和 Markdown 的最简单方式。
• ✨ 从您现有的 stories 生成最佳实践文档。
• 🌈 适用于主流框架，包括 React、Vue、Angular、Ember、Web components 以及其他十几个框架。
• ⚙️ 声明式配置，简化项目设置并提高互操作性。
• 🔌 设计集成，连接 Sketch、Figma、Adobe XD 等。

这些都完全兼容 Component Story Format (CSF) 以及整个 Storybook 工具和工作流程生态系统。

📝 使用 MDX 编写 stories 和文档

Storybook 5.3 的最大特性之一是一种全新的方式，可以在同一个文件中并排编写 Markdown 文档和 stories（组件示例）。新的 story 格式 MDX 是灵活性和人体工程学的完美结合。

一方面，它简化了为开发者创建完全自定义文档的过程，因为您可以在同一位置一次性定义 stories 和文档。

另一方面，Markdown 对于非技术团队成员来说是自然且熟悉的。设计师和产品经理可以在 Storybook 中自行编辑 UI 文档（无需您的帮助）。

MDX 是一项重大的开发者体验升级，其积极影响已开始通过 Storybook 的 alpha/beta 用户显现。简而言之，MDX 使多功能团队更容易为 UI 工程创建单一的事实来源。

阅读 Storybook MDX 公告 »

🌈 为更多框架自动生成文档

我们对 Storybook Docs 的愿景是帮助开发者自动生成最佳实践 UI 文档，而无需任何配置。最初，我们推出了 React 的支持。现在，Docs 已经一流地支持 Vue、Angular、Ember 和 Web Components。

我们从一开始就将 Storybook Docs 设计为跨框架的（就像 Storybook 的其余部分一样），但有些功能（如 Props Table 生成）本质上是特定于框架的。

在 Storybook 5.3 中，我们针对 Vue、Angular、Ember 和 Web components 优化了 Storybook Docs。我们致力于通过实施清单帮助社区成员为他们最喜欢的框架优化 SB Docs。

了解 Storybook Docs 支持的新框架 »

⚙️ 声明式配置

Storybook 配置在 Storybook 5.3 中也获得了重大升级。现在，您可以在单个文件 main.js 中执行大多数常见情况的配置。

这对开发者的人体工程学来说是一个巨大的胜利，因为您可以在单个文件中声明式地配置您的 stories、配置插件，甚至配置 webpack (!)。新的配置向后兼容旧格式。

从 Storybook 开源平台的角度来看，声明式配置为新一轮的性能和集成机会奠定了基础，这些机会以前是不可能的。

详细了解 main.js 声明式配置 »

🔌 设计工具集成

除了对核心 Storybook 产品的改进之外，由于我们庞大的插件生态系统，还有大量将 Storybook 与您喜爱的设计工具连接的新方法。

Storybook 一直以丰富的插件支持而闻名。2019 年，该项目达到了一个临界点，Storybook 成为设计工具的标准集成点。

首先，InVision 将 Storybook 支持构建到 Design System Manager 中。现在，每个主要设计工具都有插件，包括 Sketch、Figma、Abstract 和 Adobe XD。

阅读关于集成设计工具和 Storybook 的所有方法 »

🚾 Web components 获得正式支持

Storybook 对前端技术采取“多多益善”的态度，采用跨框架的核心架构，并为十几个不同的框架提供支持。现在，在 Storybook 5.3 中，我们很高兴地宣布正式支持 Web Components，感谢 Thomas Allmer 和 Lars den Bakker。

我们现在发布了 @storybook/web-components，这是一个新的软件包，旨在为所有 web components 项目提供隔离的组件开发和最佳实践 UI 文档。现在，这是 Open-WC 推荐的开发 Web components 的方式！要开始使用，请参阅 软件包 README。

除了基本的 Storybook 支持之外，Lars 和 Thomas 还在率先推出 Storybook 的另一种打包方式，其中包含 Storybook “管理器 UI”的静态构建。由于 Storybook 的默认服务模式依赖于 Webpack，因此这使得将 Storybook 嵌入到您选择的开发服务器中变得更容易。

要深入了解这项工作，请阅读 Thomas 的帖子

增强型 Web components 版 Storybook

Open Web Components 构建 Web 应用程序是一项相当庞大且具有挑战性的任务。与许多大型任务一样，它使…

dev.to

还有更多！

拥有 850 多名贡献者 的蓬勃发展的社区项目令人惊叹之处在于，系统在各个层面都在不断改进。5.3 的其他亮点包括

✅ 由 Patrick Lafrance、Atanas Stoyanov 和 Michael Shilman（我！）实现的深度链接。现在可以使用 GitHub 风格的 UI 深度链接到 Storybook Docs 中的各个部分

✅ 永久链接。Storybook 5.3 还包含 Component Story Format 升级，因此可以指定组件和 story ID 以创建 组件和 stories 的永久链接。这样，即使您重组 Storybook，现有的外部链接也不会断开。

✅ 由 Atanas Stoyanov 提供的 DocsPage 模板。Storybook 5.2 附带 DocsPage，用于从您的 stories 自动生成文档。现在，感谢 Atanas Stoyanov，DocsPage 模板现在是可配置的。这样，您可以自定义应用于 stories 的模板。例如，可以轻松地为每个 Docs 页面添加一个额外的部分。

✅ Typescript 支持。Gaëtan Maisse 和 Kai Roëder 一直在推动将 Storybook 代码库转换为 Typescript 的漫长过程，这既是为了可维护性，也是为了向 Storybook 用户提供原生软件包类型。我很高兴地宣布，在 5.3 中，最后一个面向用户的软件包已完成转换！虽然 37% 的代码库仍然是 Javascript，但用户关心的几乎所有软件包都已完成转换。

✅ 独立 CSF。现在可以使用 @storybook/csf 库在其他设计和开发工具中轻松实现 Storybook 的 Component Story Format (CSF)。更广泛的生态系统已经开始采用它

⬆️ 立即升级到 Storybook 5.3

Storybook 5.3 包含许多新功能，但据我们所知，没有任何重大更改。如果您是从 3.x/4.x 版本升级，我们提供了 5.0 升级指南。如果您已经在使用 5.x 版本，您可以像这样升级

npx npm-check-updates '/storybook/' -u
npm install # or yarn

此外，还有一些迁移在 5.3 迁移说明中记录。这些是可选更改，但我们建议您花时间在即将发布的 6.0 版本之前进行升级，届时其中许多更改将成为必需。

如果您是 Storybook 的新手，现在是开始使用的最佳时机。查看 Storybook 教程，了解 React/Angular/Vue 的逐步指南。或者直接开始

cd my-project
npx sb init
npm run storybook

一旦您升级到 5.3 版本，将 Docs 添加到您的项目中就轻而易举了

npm install @storybook/addon-docs --save-dev # or yarn

然后将其添加到您的 .storybook/main.js 配置文件的 addons 字段中

module.exports = {
  addons: ['@storybook/addon-docs'],
};

有关配置 Docs 的更多信息，请阅读 addon-docs 安装说明。

参与进来

Storybook 的支柱是其令人难以置信的开发者和用户社区。该项目已积累了近 45,000 个 GitHub 星星，这使我们与 Rails 和 Bitcoin 等传奇项目相提并论。我们共同构建组件开发的未来。

我们很乐意让您参与进来，无论您的经验水平如何。如果 Storybook 使您的 UI 开发者工作流程更轻松，请帮助 Storybook 变得更好。您可以贡献新功能、修复错误或改进文档。在 Discord 上加入我们，在 Open Collective 上支持我们，或者直接在 GitHub 上参与。请 👏 为这篇文章鼓掌并分享，以帮助更多人发现它。

Storybook 5.3 代码贡献者： @aaron-pool @adamyonk @adrian-potepa @aej11a @afebbraro @afholderman @alanhchoi @aokiken @apanizo @apust @aromanarguello @ashr81 @atanasster @b0c4j @beizhedenglong @bpeab @brandonchinn178 @carolstran @christiancooksponge @codebyalex @collingreen @crubier @dakmor @darmawanalbert @dbendaou @dhuang612 @discostarslayer @divslinger @domyen @donaldpipowitch @donysukardi @dsusskind @eubenesa @expe-lbenychou @ezhikov @frederickfogerty @gaetanmaisse @gaspardip @ghengeveld @gherciu @gongreg @halitogunc @hasparus @hcz @himynameisdave @hipstersmoothie @hobroker @hypnosphi @imgbotapp @indigolain @jack-barry @jamesdbruner @jasdeepgill @jeffgukang @jerriclynsjohn @johnalbin @jung-han @karlsander @kerbe @kerumen @kevin940726 @kevinsuttle @kroeder @kush @kylemh @lazaroonline @libetl @macrozone @mattfelten @meirish @michaeldeboey @mrmckeb @natalia504 @naturalclar @ndelangen @necolas @nminhnguyen @nutboltu @patricklafrance @peeja @pierroberto @pocka @quramy @ramkrish2079 @rbardini @sairus2k @schalkventer @shilman @spencerbyw @squidfunk @steel @stof @taimoormk @thollander @tmeasday @umar-ahmed @winterlamon @xmile1 @yosefalnajjarofficial