现代 Angular

什么是现代 Angular 工具？

由于 Angular CLI 不再包含完整的开箱即用开发解决方案，因此了解我们可用的工具以改善开发人员在构建 Angular 应用程序时的体验比以往任何时候都更加重要。

现代 Angular 工具是指能够帮助您和您的团队构建全面开发环境的现代工具。该开发环境充分利用 JavaScript 生态系统的最新改进，在构建 Angular 应用程序和库时提升生产力、一致性、可靠性、可扩展性和开发者体验。

现代 Angular 工具有哪些？

我们认为现代工具是构建 Angular 应用和 Angular 库时可以且应该使用的附加工具。这些工具往往侧重于软件开发的架构层面。

Cypress - 端到端测试
Angular CLI 在生成 Angular 应用程序时不再包含端到端解决方案。这意味着 Angular 应用程序不再提供开箱即用的 Protractor。因此，这在 Angular 的开箱即用体验方面留下了相当大的空白。Cypress 拥有最佳的开发者体验之一，其用途远不止测试 Angular 应用程序。使用 Cypress 编写、运行和调试测试非常简单，并且它支持跨浏览器测试，支持 Chrome 系列浏览器（包括 Electron 和 Edge）和 Firefox。此外，目前还存在一个支持Safari 的开放提案。

Jest - 单元测试
Jest 是目前 JavaScript 生态系统中一流的单元测试工具。Angular CLI 在生成应用程序时会包含另一个单元测试工具 Karma；然而，Karma 的速度明显慢得多，从而缩短了反馈周期。Jest
速度更快，无需启动浏览器即可运行，并且可以使用 JSDom 对组件模板进行单元测试。它还可以并行运行，从而显著缩短反馈周期。

ESLint - Linting
ESLint 已成为 JavaScript 世界中事实上的 Linting 工具，甚至在 TypeScript 项目中取代了 TSLint。Angular CLI 过去曾内置 TSLint 用于 Linting Angular 应用程序，但随着 TSLint 支持于 2020 年 12 月终止，Angular CLI 也停止了对 TSLint 的支持。事实上，Angular CLI 不再包含任何开箱即用的 Linting 工具。ESLint
是一款可插入的 Linting 工具，广泛应用于整个 JavaScript 生态系统，可让您快速实施最佳实践，甚至实现工作区内问题的自动修复。它使团队范围内的一致性维护更加轻松，并有助于避免 JavaScript 中常见的错误原因。而且它速度很快！

Storybook - 组件设计
前端框架和库已经融合为以组件为中心的单一核心设计范例。在应用程序的上下文中构建这些组件很好，但可能会变得很麻烦。这可能会导致设计不一致和工作效率下降，因为您每次想要检查更改时都必须启动应用程序，同时尝试在应用程序的多个区域匹配设计。Storybook
旨在通过允许您独立构建组件来简化组件的设计和开发过程，提高工作效率（因为您不再需要启动应用程序），并提高一致性，因为它成为组件文档的真实来源。您可以从 Storybook 应用程序轻松查看工作区中的所有组件（带有故事）。Storybook 还支持插件，可以帮助您测试组件的可访问性等内容（使用A11y 插件）。

Prettier - 格式化
当与多名开发人员合作时，一致的代码风格和格式是快速开发的关键。花在弄清楚如何阅读代码上的时间，实际上就是浪费在实际阅读代码上的时间。Prettier 是一款自动化、规范的格式化工具，它能够消除代码样式中的人为情感，同时为团队中的所有开发人员提供一致的代码风格。Prettier 减少了开发过程中对样式指南的需求，消除了代码审查中代码风格的问题，让开发人员专注于代码编写。所有这些都有助于提高团队的整体生产力和代码库的可读性！

我们为什么要关心它？

我们应该努力在 Angular 中使用现代工具的原因有很多。其中许多原因在上文中都与我们定义的现代 Angular 开发必备的工具相关。当我们将它们全部整合到一个开发工作区中时，我们会得到：

• 提高生产力
  • Storybook 可以在不运行应用程序的情况下帮助构建组件。
  • 开发人员花费更少的时间进行格式化，而花费更多的时间编写代码。
• 更快的反馈（错误、测试、构建）
  • 更快的测试工具可以更快地反馈应用程序中可能出现的错误、测试和潜在缺陷。
  • ESLint 对任何违反规则的代码提供快速反馈，甚至可以自动为您修复该代码。
• 更好的调试
  • 使用现代工具，查找和消除错误和缺陷变得更加容易。
  • 它们都是为与 JavaScript 生态系统协同工作而构建的，该生态系统已经包含出色的调试工具，例如VSCode中的 Debug 功能或 Chrome DevTools。
• 为团队提供更好的护栏
  • 这听起来可能有点矛盾。你为什么要给你的团队加限制？限制本身就是一种力量。
  • 它消除了对什么是允许的、什么是不允许的猜测，并帮助他们专注于一致地编写代码。
• 跨团队的一致性
  • 保持所有开发应用程序的团队的一致性至关重要。
  • 它使公司能够轻松地加入和退出新开发人员，并帮助任何开发人员进入代码库的任何部分并了解用于创建应用程序的结构和模式，从而提高知识重用。
• 综合测试
  • 通过为我们的应用程序编写单元和端到端测试，我们创建了一个全面的测试环境。
  • 当我们向应用程序添加更多特性和功能时，这使我们能够确保通过应用程序的顺利路径能够正常工作。
  • 它还可以帮助我们改善用户体验，确保异常路径也能为我们的用户提供反馈，表明出现了问题。
  • 它有助于为进行更改的开发人员提供信心，确保他们没有给代码库带来任何回归。
  • 它可以帮助初级开发人员快速上手，因为他们可以全面了解应用程序的预期功能，并且他们可以做出更改，因为他们知道如果他们破坏了某些功能，他们会（迅速）收到通知。

Nx 能提供什么帮助？

Nx 提供了一个完整而全面的开发工作区，用于构建应用程序。它支持 Angular（以及其他库和框架！）。它无缝集成了上述所有现代工具，可立即提升您的开发者体验、团队生产力以及应用程序的可扩展性和可靠性。
您可以通过运行以下命令来启动并运行包含上述工具的 Angular 应用程序（同时仍然获得 Angular 的所有优势）：

npx create-nx-workspace --preset=angular

如果你更喜欢 Yarn，你可以使用

yarn create nx-workspace --preset=angular

此命令将创建您的工作区并自动集成上述工具。唯一不会自动集成的工具是 Storybook。不过，Nx 也让集成 Storybook 变得非常简单！创建工作区后，您只需在工作区的根目录下运行以下命令：

npm run ng g @nrwl/angular:storybook-configuration 

或者，使用 Yarn

yarn ng g @nrwl/angular:storybook-configuration

要了解有关 Nx 的更多信息以及它如何帮助您的开发，请参阅我们关于Angular的文档。