将多个现有的Angular项目添加到NX工作区/ monorepo

时间:2020-05-13 15:41:21

标签: angular nrwl-nx

我们和Angular商店一起,正在考虑使用NX来管理monorepo。我已经看过很多有关将现有的Angular CLI工作空间转换为NX工作空间的指南和文章。

因此,我们的方法是将最复杂的项目转换为NX工作区。然后,下一步就是将其他Angular项目添加到这个新的工作区中。

我将如何去做? 我是否必须基本上使用NX cli创建空白应用程序,然后将所有代码复制到空白应用程序中?然后,我们必须npm安装这个新项目所需的所有软件包?

1 个答案:

答案 0 :(得分:2)

我实际上会从一个简单的项目开始,然后尝试找到您要在组织中使用的一些最佳实践。像Angular本身一样,Nx Workspace固执己见,但只在一定程度上发挥了作用。您仍然有责任决定如何将代码分成逻辑单元。

要记住的主要一件事是Nx使用appslibs的想法。理想情况下,app很小,并且大多数(如果不是全部)实际功能都位于libs中。在Angular中,这通常意味着您可以延迟加载库中的组件。

关于如何构建库,有多种解决方法。您可以阅读this blogpost以获得一些想法。

此外,请记住,使用单一回购并不意味着您必须在单个回购中拥有公司的所有代码。例如,我处理许多不同的客户项目,并且为每个客户项目都拥有一个Nx Workspace更有意义。然后,如果需要在项目之间共享代码,请确保将其发布到npm并将其视为第三方库。

我将如何去做?我是否必须基本上使用NX cli创建空白应用程序,然后将所有代码复制到空白应用程序中?然后,我们必须npm安装这个新项目所需的所有软件包?

是的,我个人将从一个完整的空白开始。

您可以通过使用empty预设创建一个Nx工作区,并确保选择Angular CLI来实现:

$ yarn create nx-workspace <project-name> 

下一步,进入目录并添加Nrwl Angular软件包:

$ cd <project-name>
$ yarn add -D @nrwl/angular

从那一刻起,您可以像这样生成应用和库:

ng g @nrwl/angular:app <app-name>
ng g @nrwl/angular:lib <lib-name>

您现在可以开始将代码从上一个项目移到lib文件夹中,并从app引用该代码。如果您已经在Angular中拥有一个可以正常工作的模块结构,则只需为每个模块创建一个lib。

我希望这会有所帮助。