将多个现有的Angular项目添加到一个NX工作区/单库中

7
我们是一家 Angular 店,考虑使用 NX 来管理 monorepo。我看过许多关于将现有的 Angular CLI 工作区转换为 NX 工作区的指南和文章。
因此,我们的做法将是将我们最复杂的项目转换为 NX 工作区。然后下一步就是将我们的其他 Angular 项目添加到这个新的工作区中。
我该如何做? 我是否需要使用NX cli创建一个空白应用程序,然后将所有代码复制到空白应用程序中?然后,我们需要安装此新项目所需的所有软件包吗?
2个回答

8
我建议从一个简单的项目开始,尝试找到一些你想在组织中使用的最佳实践。就像Angular本身一样,Nx Workspace是有意见的,但只限于某种程度。您仍然有责任决定如何将代码分成逻辑单元。
需要记住的一个主要事项是,Nx使用“应用程序”和“库”的概念。理想情况下,“应用程序”非常小,大部分(如果不是全部)实际功能都在“库”中。在Angular中,这通常意味着您需要延迟加载存在于libs中的组件。
关于如何构造libs的结构,有不同的方法可以采取。您可以阅读this blogpost以获得一些想法。
此外,请记住,工作在单个存储库中并不意味着您必须将所有公司代码放入其中。例如,我与许多不同的客户项目合作,为每个客户项目创建Nx Workspace更加合理。然后,如果我需要在项目之间共享代码,我会确保将其发布到npm,并将其视为第三方库。
我该如何做到这一点?我需要使用NX cli来创建一个空白应用程序,然后将所有代码复制到空白应用程序中吗?然后,我们需要npm安装此新项目所需的所有包吗?
是的,我个人会从完全空白的状态开始。
您可以通过使用“empty”预设创建一个Nx Workspace,并确保选择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中运作良好的现有模块结构,你可以为每个模块创建一个库。希望这能帮到你。

很好的分析,但是在项目之间共享npm包是我来这里的原因,它很难维护,而且不是免费的,会在ci/cd中使用密钥时引起复杂性。尝试通过monorepo消除这种情况。如果有任何建议,将不胜感激! - Ben Racicot
你好!项目已成功创建,但新添加的项目 @beeman 中缺少 package.json 文件。 - Paresh Gami
嘿,Paresh Gami - 你可能已经看到我在3年前发布了这个答案。如果你的 Nx 项目有什么问题,最好在他们的存储库中提交一个带有复现步骤的问题,或者加入他们的 Slack 寻求帮助。祝好运! - beeman

1

步骤1:在命令终端中输入cd ->工作区/项目名称</p>

然后在项目名称内输入以下命令:

步骤2:nx generate @ngrwl/angular:app ->应用程序名称<-


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接