Angular 12 的 Storybook
支持下一代渲染管道
Storybook，最受欢迎的组件工作台，正在迎来其有史以来最大规模的 Angular 升级。Storybook for Angular 已被彻底重写，并在从渲染引擎到自动文档支持的方方面面都得到了改进。
Storybook 6.3 中的新版本包括
🖼 支持 Ivy 渲染
🎛 自动生成的控件、文档、动态源代码片段
🎁 零配置设置，内置 TypeScript 支持
📚 更新的教程和文档
📦 支持 Webpack 5
所有这些都是在 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 渲染
Storybook for Angular 现在支持 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 中），这意味着页面可以根据你需要的故事数量进行扩展。而且文档的源代码片段现在是真正的 Angular 模板，并且当你使用控件编辑组件属性时会动态重新渲染。
非常适合 UI 测试
当你在 Storybook 中构建 UI 时，你会免费获得测试能力。Storybook 围绕着“stories”的概念展开，这些 stories 捕获了你的 UI 组件所支持的状态。
在开发过程中，你可以手动确认你的 stories “看起来正确”，并使用一系列插件从其他维度测试你的 story，例如可访问性和移动友好性。
在持续集成中，你可以分别使用快照测试和可视化测试自动检测你的 stories 的结构和视觉变化。
测试你的 stories 非常有用，因此有多个商业服务与 Storybook 集成，在云端和跨浏览器运行测试。值得注意的是，由 Storybook 维护者创建的 Chromatic 与 Storybook 紧密集成，提供免费的自动化发布和视觉差异检测。
更重要的是，你的 stories 可以在不同的工具之间移植。Storybook 开创了组件 Story 格式 (CSF)，这是一种基于 JavaScript ES6 模块的组件示例开放标准。这使得你可以在单元测试和端到端测试中重用 stories——没有锁定。
300+ 插件供你选择
Storybook 多年来一直在完善其跨框架兼容性。这意味着 Storybook 的数百个插件几乎都可以供 Angular 用户使用。插件解锁了诸如可访问性测试、设计交付集成、样式实用工具和模拟网络请求等超级功能。
下一步
Storybook for Angular 现已推出 6.3 RC 版本。通过在项目根目录中运行以下命令进行安装。然后查看更新的教程和参考文档。
npx sb@next init升级现有项目
npx sb upgrade --prereleaseWebpack 5 支持会自动包含在新安装中，但对于升级，你需要手动安装。
我们为 Angular 计划了重大改进，特别是在通过builders与官方 Angular CLI 更紧密的集成方面。
参与其中
Storybook 由 1,300 多名开源贡献者维护，并由一个顶级维护者指导委员会指导。Storybook for Angular 由Thibaud Avenier 和 Kai Röder 维护，他们负责了本文中描述的大部分升级工作。Angular 支持最初由Carlos Vega贡献。
如果你有兴趣贡献，请在 GitHub 上查看 Storybook，创建一个 issue 或提交一个 pull request。在 Open Collective 上捐赠。加入我们的 Discord 聊天群——通常有维护者在线。在 Twitter 上关注 Storybook 的最新消息，并通过下方注册我们的邮件列表。