Angular 12 的 Storybook

Storybook，最受欢迎的组件工作台，迎来了有史以来最大的 Angular 升级。Angular 版 Storybook 已经完全重新设计，从渲染引擎到自动文档支持，全面提升了用户体验。

新版本在 Storybook 6.3 中提供，包括

🖼 Ivy 渲染支持
🎛 自动生成控件、文档、动态源代码片段
🎁 零配置设置，内置 TypeScript 支持
📚 更新的教程和文档
📦 Webpack5 支持

除了 Angular 用户已经可以使用的大量开发、测试和文档插件生态系统之外，这一切都是额外的。继续阅读以全面了解新功能！

押注 Angular

Angular 在 Storybook 生态系统中占有特殊的地位。它是我们在 2017 年 集成的最早的社区之一。它还将 TypeScript 引入了 Storybook；此后，由于这项工作，我们将整个代码库迁移到了 TS。

从那时起，@storybook/angular 的使用量已增长到每月超过 500,000 次 npm 下载。Angular 生态系统也采用了我们，并进行了 一流的 nx 集成。

零配置设置

要开始使用，请在现有 Angular 项目的根目录中运行以下命令

npx sb@next init

这会检测项目类型，安装 @storybook/angular，并添加一些示例文件来演示 Storybook 的基本知识。运行 yarn storybook 将为您提供以下零配置设置

当您在本地导航到 Storybook 时，您将看到如何编写 Angular stories 的示例、常用配置的链接以及 Storybook 附带的 “基本”插件。

TypeScript 支持是内置的。Webpack 5 支持（Angular 12 中的一项重大底层升级）也是内置的。如果您要升级现有的 Storybook/Angular 项目，请按照迁移说明进行升级。在官方文档中了解更多信息。

Ivy 渲染支持

Angular 版 Storybook 现在支持 Ivy 渲染管线。

Ivy 提前 (AoT) 编译组件，从而实现更小、更简单、更快速的应用程序。它于 2018 年首次作为“下一代”技术推出，自 Angular 9 以来一直是默认设置。

支持它是一场艰苦的战斗，经过了一年多的实验。维护者 Kai Röder 和 Thibaud Avenier 与 Minko Gechev (Angular 核心团队) 合作，最终在 Storybook 6.3 中，我们自豪地发布了实验性 Ivy 渲染。全新的 Storybook 安装和升级到最新版本都默认启用 Ivy。

自动生成控件和文档

Storybook 从 compodoc 读取 docgen 信息，以根据您的 stories 和组件自动生成控件和文档。

上一节的示例将生成以下 UI，用于交互式探索您的组件状态

它还在没有额外工作的情况下生成组件文档，其中包括所有关键状态，并使用从组件源代码中提取的属性进行布局

您的组件的控件和文档始终是最新的，因为它们是从源代码自动生成的。当组件的 API 发生更改时，您无需跟踪 UI 文档，Storybook 会为您执行此操作。

我们关注了细节。Angular stories 在文档页面中内联呈现（而不是像以前那样在 iframe 中），这意味着页面可以扩展到您需要的任意数量的 stories。并且文档源代码片段现在是适当的 Angular 模板，并且当您使用控件编辑组件的属性时，它们会动态地重新呈现。

非常适合 UI 测试

当您在 Storybook 中构建 UI 时，您可以免费获得测试。Storybook 围绕 stories 的概念展开，这些 stories 捕获了您的 UI 组件的受支持状态。

在开发中，您可以手动确认您的 stories “看起来正确”，并使用一套插件从其他维度测试您的 story，例如可访问性和移动设备友好性。

在持续集成中，您可以使用快照和视觉测试分别自动检测 stories 中的结构和视觉变化。

测试您的 stories 非常有用，以至于多家商业服务都与 Storybook 集成，以在云端和跨浏览器运行测试。值得注意的是，由 Storybook 维护者创建的 Chromatic 与 Storybook 紧密集成，并提供免费的自动化发布和视觉差异。

更重要的是，您的 stories 可以在工具之间移植。Storybook 开创了 Component Story Format，这是一种基于 JavaScript ES6 模块的组件示例开放标准。这使您可以将 stories 重用于单元测试和端到端测试——没有锁定。

300 多个插件可供选择

多年来，Storybook 一直在改进其跨框架兼容性。这意味着 Storybook 的几乎所有 数百个插件 都可供 Angular 用户使用。插件解锁了超能力，例如可访问性测试、设计交付集成、样式实用程序和模拟网络请求。

下一步

Angular 版 Storybook 现在在 6.3 RC 中可用。通过在项目根目录中运行以下命令来安装它。然后查看更新的 教程 和 参考文档。

npx sb@next init

要升级现有项目

npx sb upgrade --prerelease

Webpack5 支持自动包含在全新安装中，但对于升级，您需要手动安装它。

我们为 Angular 计划了重大改进，尤其是在通过 builders 与官方 Angular CLI 更紧密地集成方面。

参与进来

Storybook 由 1,300 多名开源贡献者维护，并由顶尖维护者组成的指导委员会指导。Angular 版 Storybook 由 Thibaud Avenier 和 Kai Röder 维护，他们负责本文中描述的大部分升级。Angular 支持最初由 Carlos Vega 贡献。

如果您有兴趣贡献，请在 GitHub 上查看 Storybook，创建 issue 或提交 pull request。在 Open Collective 上捐款。在 Discord 中与我们聊天 — 维护者通常在线。在 Twitter 上以及通过注册我们的邮件列表来了解 Storybook 的最新消息。