在本教程中，我们将学习nwl工具Nx的基础知识，以及如何创建自定义工作区CLI示意图。您可以在这个存储库中看到完成的代码。注意：本教程假定您对Angular和Angular CLI有一些基本的了解。如果你以前从未接触过Angular，请看看我们真实世界的Angular系列。企业团队的关注点在大型企业团队中开发应用程序与单独或在小型团队中开发不同。虽然小团队可能能够在应用程序结构或编码最佳实践方面做出特别的决定，但当您与几十个甚至数百个其他人一起工作时，情况就不一样了。此外，企业团队需要假设他们的代码将在未来的许多年中一直存在。这意味着他们将需要在应用程序开发的开始阶段尽可能多地做工作，以最大限度地降低以后的维护成本。我们可以这样总结企业团队的关注点：一致性—我们如何确保组织中的每个人（可能是数千人）都遵循相同的最佳实践来构建和编写代码？安全-我们如何确保我们的代码不会受到攻击或容易出错？增加了代码的大小和复杂性—我们如何构建代码，使其在不牺牲清晰度或性能的情况下增长？不断变化的需求-我们如何才能跟上业务的需求，不断更新应用程序，而不让技术债务失控？虽然小团队和小组织在某种程度上有着相同的关注点，中国云，但风险在企业规模上可能是灾难性的。要了解更多大型团队面临的问题，请查看维克多·萨夫金（Victor Savkin）的《2018年杰出的ng conf talk at large Organizations》。Nx:Angular的企业工具包来源Nx是咨询公司Nrwl为Angular CLI构建的一组工具，旨在帮助解决一致性、安全性和可维护性等问题。除了包含实现monorepo风格的应用程序和库开发的示意图外，Nx还包括一组库、linter和代码生成器，以帮助大型团队在其组织中创建和实施最佳实践。"Nx by@nrwl_io是一套帮助企业@angular devs保持一致性、安全性和可维护性的工具。"在推特上留言Nx开箱即用，包含有助于：状态管理和NgRx数据持久性代码整理和格式化从AngularJS迁移到AngularJS可视化分析依赖项创建和运行更好的测试创建特定于工作空间的示意图虽然我们不能深入研究Nx的每一个特性，但我们将稍微看一下最后一个特性：特定于工作区的示意图。不过，在开始之前，返利机器人哪个好用，让我们学习如何开始使用Nx。Nx基础知识让我们学习使用Nx启动和运行的基本知识。我们需要知道如何安装Nx，如何生成工作区，以及如何创建应用程序和库。安装Nx我们将从安装Nx开始，Nx实际上只是角度CLI示意图的集合。您需要Node 8.9或更高版本和npm5.5.1或更高版本，您可以从Node网站安装。首先，确保全局安装了Angular CLI的最新版本：npm i-g@角度/cli（注意npm i-g只是npm install--global的简写。）然后，全局安装Nx：npm i-g@nrwl/示意图全局安装Nx实际上只需要从命令行从头创建工作区。如果你不能在全球范围内安装，不用担心。您可以通过运行以下命令向现有CLI项目添加Nx功能：ng add@nrwl/示意图注意：如果您希望使用GUI而不是命令行，那么您也可以在本教程中使用Angular控制台而不是CLI。创建工作区现在我们已经安装了Nx，我们准备创建我们的第一个工作区。不过，工作区到底是什么？工作区是monorepo（monorepos的缩写）的一个例子，monorepo是一个存储多个相关应用程序和库的存储库。让我们想象一下，我们的任务是创建一个宠物收养系统。让我们考虑一下我们可能需要的一些不同的部分：一个前端应用程序，供潜在的收养者浏览宠物用于管理员更新可用宠物并接收查询的前端应用程序前端之间的共享UI组件前端之间的共享数据访问库提供宠物和收养查询数据的节点服务器虽然我们可以将它们分别保存在一个单独的存储库中，但是保持所有版本的同步、管理依赖关系以及确保所有在项目中工作的开发人员都具有所需的正确访问权限，这会变得很麻烦。Monorepos解决了这些问题以及更多问题。对于Nx，工作区是Angular CLI的monorepo结构，用于保持应用程序和库的组织。全局安装Nx后，可以运行以下命令：创建nx工作区宠物收养系统当我们使用7版或更高版本的CLI和Nx运行此命令时，我们将得到两个提示问题。第一个问题是我们是否愿意为npm scope使用一个单独的名称，它允许我们使用速记在内部导入。例如，我们可以将范围设置为"adoption suite"，这意味着我们的导入将从@adoption suite开始。在本教程中我们不打算这样做，所以我们只需按enter键，将其保留为默认设置，即宠物收养系统。第二个提示是，我们是要使用新产品管理还是纱线包装管理。在本教程中，我将使用npm，但欢迎您使用Yarn。这将创建一个新的CLI工作区，它看起来与您以前使用的工作区稍有不同。与通常的src文件夹不同，什么是物联网工程，您将在项目的根目录下看到名为apps、libs和tools的文件夹。您还将看到一些额外的文件，如nx.json文件要配置Nx，.prettierrc配置Prettier格式扩展名，.editorconfig设置一些编辑器预设。Nx为您做了很多设置，云服务器价格比较，因此您可以专注于编写代码而不是工具。创建应用程序让我们在新的工作区中创建一个应用程序，并向其添加路由。ng生成应用程序采用ui——路由Nx的版本7添加了关于目录位置、样式扩展以及单元和端到端测试运行器的选择的提示。这是很好的，因为我们现在可以轻松地设置一个应用程序，使用SCSS、Jest进行单元测试，使用Cypress进行端到端测试，而不需要额外的工作。在本教程中，请随意保留所有提示的默认值。我们不会在这里用的。Nx的app schematic几乎与内置的CLI版本相同，但是它确实有一些不同之处。例如，我们添加的路由选项使用路由配置根NgModule，而不是创建单独的模块。这在Angular社区已经越来越成为避免"模块污染"的最佳实践，所以Nx在默认情况下为我们这样做是非常好的。运行完命令后，我们将拥有一个apps/adoption ui文件夹，其中包含熟悉的CLI结构。注意，AppModule是用routing设置的，并且有一个单独的apps/adoption-ui-e2e文件夹用于量角器。这与常规的CLI设置稍有不同，后者e2e文件夹位于app文件夹内。创建库库是存放UI组件或用于多个应用程序的数据访问服务的理想场所。我们可以使用AngularCLI generate命令向Nx工作区添加新的lib，就像添加新的应用程序一样。Nx有一个名为lib的示意图，可用于将新的角度模块lib添加到我们的工作区：ng生成lib共享组件我们将在命令行中得到一些关于工具、测试、设置和路由的提示。因为我们实际上不打算使用这个库，所以这些问题的答案是不相关的——继续，接受所有的默认值。不过，从命令行（从路由和延迟加载到工具和设置）了解可定制lib有多容易。运行这个命令将创建一个libs/shared组件，它有自己的src文件夹和配置文件。通过向CLI传递一个项目选项，我们可以轻松地将组件添加到这个库中。让我们利用g快捷方式生成和c快捷方式组件，并运行以下命令：ng g c pet list--export=true--project=共享组件因为这是一个共享库，所以我添加了export=true来从NgModule导出组件。既然我们已经了解了Nx的基本知识，那么让我们来探讨一下它的一个鲜为人知但却非常强大的特性：创建自定义工作区示意图的能力。创建自定义身份验证原理图实际上，您已经熟悉了原理图—当您运行nggenerate命令时，Angular CLI使用它们来创建新的组件、服务等。您也可以从头开始编写自己的原理图，无论您是否使用Nx。不过，Nx的优点在于，它完成了连接自定义示意图的所有艰苦工作，物联网的，以便在您的工作区中轻松地运行它们。自定义示意图通常用于两个广泛的用途：在组织中实施样式或标准。生成特定于组织的自定义代码。"Custom@angular CLI示意图用于实施样式或标准并生成自定义代码。"在推特上留言在本教程中，我们将把重点放在前者上，因为使用schematicsapi生成自定义代码需要一些TypeScript抽象语法树的知识，这超出了本教程的范围。实施样式或标准的自定义原理图的一些好主意示例如下：执行董事