在Angular工作区管理多个项目的方法

968 阅读4分钟

阅读时间: 4 分钟

简介

你可能会遇到这样的情况:你需要在一个项目中管理多个项目。在这种情况下,你可以创建一个Angular工作区并在其中管理你的多个项目。让我们先来了解一下什么是工作区。

什么是工作区?

工作区允许你将你的应用程序组织成多个项目,其中一个项目包含的文件构成了一个独立的应用程序。要设置多个项目,你需要跳过最初创建的应用程序结构,只需创建一个工作区。

在Angular中,当你运行以下命令时。

ng new myFirstApplication

那么你的项目结构就会是这个样子。

它在一个新的工作空间中安装了所有必要的npm包和所有的依赖项,创建了一个名为my-project的应用程序。在这种情况下,应用程序的名称与工作空间的名称相同。这就是 "多版本 "的开发方式,每个应用程序都驻留在自己的版本库中。

通过只创建一个没有Angular初始应用的工作空间,我们可以在其中管理多个项目。在这种情况下,我们也可以创建可共享的库,并可以使用 "monorepo "开发方式,其中将有一个包含所有应用程序和可共享库的单一存储库。

一个工作区中的多个项目的优点

  • 你将有一个共享的node模块文件夹用于所有项目,从而节省磁盘空间
  • 你不需要为每个项目运行npm安装。
  • 一个单一的git仓库

前提条件

Angular需要10.9.0或更高版本的node。

创建一个工作区

要创建一个工作区,请运行以下命令。

$ ng new firstWorkspace --create-application=false

我们将-create-application设置为false,以避免在工作区中创建初始Angular 10应用程序。这里'firstWorkspace'是工作区的名称。你可以把它命名为任何你想要的东西。

这里是初始工作区的项目结构。

最初,它将只生成这些文件。

  • README.md用于项目信息
  • angular.json用于工作空间中所有项目的构建、服务和测试工具的CLI配置
  • package.json,用于所有的依赖性。
  • tsconfig.json用于Typescript配置,tslint.json用于TSLint配置,tslint.json用于TSLint配置。
  • .editorconfig用于代码编辑器的配置。
  • .gitignore用于列出应该被git忽略的文件。

在工作区创建一个应用程序

现在让我们在其中创建一个项目。

切换到工作区目录,运行以下命令。

ng generate application first-app

在这里,你可以看到创建两个应用程序后的目录结构的样子。

要为生产构建你的应用程序,你可以像这样在ng build命令中提到应用程序的名字。

ng build --prod --project="first-app"

在工作区中创建一个库

你也可以在工作区中创建一个库。库是一个不能独立运行的项目,它必须被导入并用于一个应用程序中。一个库总是为解决一般的解决方案而创建的,可以进一步用于不同的应用程序。你可以在本地使用它们,也可以将它们作为npm包发布。

要创建一个库,请遵循以下命令

ng generate library libraryName

当你创建一个库时,生成的文件将在projects文件夹内。我已经创建了一个名为 "my-lib "的库,库的目录结构是这样的。

与应用程序不同,库将有自己的package.json。库将包括一个模块、服务和一个组件。另外,当你创建一个库时,angular.json将被更新为一个库类型的项目。

如果你想将你的库作为一个npm包发布,请参考 这里

要在同一个包中使用这个库,你需要用下面的命令来构建它(在库被构建之前你不能使用它)。

ng build libraryName

此外,你可以把它导入你的应用程序来使用它。

import { myExport } from 'libraryName';

每当你对你的库做任何改动时,不要忘记重建它。否则,你的应用程序将使用旧的库的构建。

要了解更多关于库的信息,请参考这里

运行应用程序

有三种方法来运行应用程序。

  • 在angular.json中,你可以看到最后的默认项目。所以把项目名称改为你想运行的应用程序,然后运行 "ng serve "命令。
  • 要运行应用程序,你可以在命令本身中设置名称,如。
ng serve --project="first-app"
  • 你可以简单地在ng serve后面写上应用程序的名称,如:。
ng serve first-app

总结

在这篇博客中,我们了解了什么是工作区,以及如何在其中管理多个项目。我们了解了如何在其中运行不同的应用程序以及如何创建一个库。