为啥 nrwl/nx 比 angular@6 vanilia 更好？

Posted 2023-03-23

【中文标题】为啥 nrwl/nx 比 angular@6 vanilia 更好？

【英文标题】：Why nrwl/nx is better that angular@6 vanilia?为什么 nrwl/nx 比 angular@6 vanilia 更好？

【发布时间】：2018-10-30 19:36:21

【问题描述】：

nrwl/nx 的最大优势是在一个项目中实现多个工作区。 现在angular 6 也支持它。 nx 与 angular@6 相比还有哪些其他改进？

【问题讨论】：

Nrwl 在their wiki 发布了一个页面。

现在是空的 xD xD

【参考方案1】：

nx 很棒，我使用它是因为我们在一个大项目中有 5 个 Angular 应用程序，而且我认为 nrwl/nx 是为复杂的企业应用程序而设计的，所以如果你有一个由许多前端应用程序组成的大项目，它会很有用，但即使对于一个会给你带来很多好处的应用程序，nx 也有一些好处：

您将为共享相同 package.json 的所有应用程序创建一个 monorepo，因此您必须为所有应用程序管理一次包 更高的一致性和生产力 您可以创建可在您的应用之间共享的库，这将节省您的时间，并且团队表示最好将所有逻辑代码放在库中，即使它们不在应用之间共享也是如此 如果我们将其与标准 cli 进行比较，则代码生成的更多选项 您将拥有出色的路由和状态管理 (ngrx) 实施（实施正确的） 构建时间改进：使用 nx，您将避免重新执行不必要的构建，因此如果您对 lib 进行一些更改，nx 将确保只有依赖于它的应用才能构建。 nx 的未来是拥有一个功能强大的 mono repo 工具和一个出色的构建系统（nx 的 Bazel 版本），并希望您的项目为 CI 做好准备

使用一个命令，您可以构建或测试受您的更改影响的应用

yarn affected:build --all --prod
yarn affected:test --all --prod

现在可以生成多种类型的前端应用程序ANGULAR、REACT // 用于生成反应应用程序 ng add @nrwl/react # 将 React 功能添加到您的工作区 ng g @nrwl/react:application reactAppName

// for generating an angular app
ng add @nrwl/angular
ng g @nrwl/angular:application angularAppName

为您的前端应用（如 Nest）生成后端应用，并以灵活的方式在前端和后端应用之间创建共享库

ng add @nrwl/nest
ng g @nrwl/nest:app api --frontendProject=YOU_FRONTEND_PROJECT // link the generate nest app to a specific frontend app 

【讨论】：

我要补充一点，我真的很喜欢 nrwl 团队推广的最佳实践和工具（虽然有点自以为是，但在 Angular 世界中一切都是自以为是的）。您始终可以信任他们，并确保您拥有可靠的架构，使用 nx。

【参考方案2】：

我在过去的两份工作中使用并提倡使用 Nx，并且（大部分）喜欢它。

我继续在普通 Angular 上使用它，因为他们不断添加新工具，这些工具支持更复杂的应用程序，并消除了与设置现代 javascript Web 应用程序相关的许多痛苦（即配置和设置地狱）将现代 Web 开发库粘合在一起时）。

他们承诺以一种支持而不是远离 Angular 的方式开发他们的产品，但可以访问对开发人员友好的工作流，这些工作流支持除 Angular CLI 开箱即用之外的其他工具。

例如，他们最近添加了对赛普拉斯 e2e 测试的支持，包括项目设置、运行测试的脚本，以及仅对受上次更改影响的项目部分运行测试的命令。

他们对请求也非常敏感，并实施了我团队成员建议的几个修复/次要功能。

总而言之，他们似乎在为已经强大的 Angular CLI 发布闪亮的新插件的速度非常快，这使它成为一个引人注目的产品。

但是，如果您的应用程序不是很复杂，您可能不需要很多这些功能。

如果您有兴趣，我已经写了几篇文章，详细介绍了我过去是如何使用它的，最近还谈到了 Cypress 的东西：

http://wtfisanapi.com/wtf-is-nrwl-nx/

http://wtfisanapi.com/htf-do-i-write-e2e-tests-with-a-stubbed-dependency-angular-nrwl-nx-edition/

【参考方案3】：

它的工具可以帮助您只构建您进行更改的应用程序。因此，如果您在共享库中进行更改，它可以确定哪些应用使用该库项目并仅构建它们。

【参考方案4】：

就我个人而言，我发现我可以调试我的库很方便，而且我在使用 NX 时不必构建它们来使用它们。这是一个非常简单的项目，它具有一些 tsconfig 的魔力，但它确实使它更容易。

此外，虽然它与 Angular CLI 6 的结构基本相同，但细微的差异对我来说更有意义。

【讨论】：

实际上，您可以在 Angular CLI 工作区中获得此功能，只需将 tsconfig.json 中的 paths 配置为入口文件而不是 dist 输出。