阅读时间: 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
总结
在这篇博客中,我们了解了什么是工作区,以及如何在其中管理多个项目。我们了解了如何在其中运行不同的应用程序以及如何创建一个库。




