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 中，我们优化了 Storybook Docs 对 Vue、Angular、Ember 和 Web Components 的支持。我们致力于通过实现清单帮助社区成员为其喜爱的框架优化 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 嵌入到您选择的开发服务器中，因为 Storybook 的默认服务模式依赖于 Webpack。

要深入了解这项工作，请阅读 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，现有的外部链接也不会断开。

✅ DocsPage 模板，由 Atanas Stoyanov 贡献。Storybook 5.2 发布时带有 DocsPage，用于从您的 stories 自动生成文档。现在，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 Star，这使我们与 Rails 和 Bitcoin 等传奇项目并驾齐驱。我们共同建设着组件开发的未来。

无论您的经验水平如何，我们都非常欢迎您的参与。如果 Storybook 让您的 UI 开发者工作流程更轻松，请帮助 Storybook 变得更好。您可以贡献新功能、修复 bug 或改进文档。加入我们的 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