Storybook 5.3

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

我们完善了这一工作流程，因此，Storybook 现已成为 Airbnb、Lyft、Slack、Twitter 等行业巨头以及成千上万团队的首选工具。

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

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

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

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

📝 使用 MDX 编写故事和文档

Storybook 5.3 的最大亮点之一是提供了一种全新的方式，可以在同一文件中并排编写 Markdown 文档和故事（组件示例）。新的故事格式 MDX，是灵活性和易用性的完美结合。

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

另一方面，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 5.3 中的 Storybook 配置也迎来了重大升级。现在，您可以在单个文件 `main.js` 中执行大多数常见配置。

这对开发者易用性来说是一大胜利，因为您可以在一个文件中声明式地配置故事、配置插件，甚至配置 Webpack！新配置与旧格式向后兼容。

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

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

🔌 设计工具集成

除了核心 Storybook 产品本身的改进，由于我们庞大的插件生态系统，还有许多新的方式可以将 Storybook 与您喜欢的設計工具连接起来。

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

首先，InVision 在其Design System Manager中集成了 Storybook 支持。现在，每个主流设计工具都有相应的插件，包括 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 嵌入到您选择的开发服务器中更加容易，因为 Storybook 的默认服务模式依赖于 Webpack。

有关此工作的深入探讨，请阅读 Thomas 的文章

功能强大的 Web Components Storybook

Open Web Components 构建 Web 应用程序是一项非常艰巨且具有挑战性的任务。就像许多重大任务一样，它使得…

dev.to

以及更多！

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

✅ 深度链接，由Patrick Lafrance、Atanas Stoyanov和Michael Shilman（我！）提供。现在可以深度链接到 Storybook Docs 的特定部分，界面类似于 GitHub。

✅ 永久链接。 Storybook 5.3 还包含 Component Story Format 的升级，使得可以指定组件和故事 ID 来创建组件和故事的永久链接。这样，即使您重新组织 Storybook，现有的外部链接也不会中断。

✅ DocsPage 模板，由Atanas Stoyanov提供。Storybook 5.2 提供了 DocsPage 来从您的故事自动生成文档。现在，得益于 DocsPage 模板，这些模板变得可配置。这样您就可以自定义应用于故事的模板。例如，可以轻松地在每个 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