当前位置: 首页 > Web前端 > HTML5

Angular如何为多个项目使用单个存储库

时间:2023-04-05 12:42:35 HTML5

Angular工作区是Angular项目的集合。Angular项目包括应用程序和库。用于创建或操作应用程序和库的命令(例如添加和生成)必须在工作区目录中执行。ngnew上面的命令行实际上创建了一个新的工作区。当您运行此命令时,CLI会在一个新的工作区中安装所需的Angularnpm包和其他依赖项,其中包含一个名为my-project的根leavl应用程序。工作区的根文件夹包含一些工作区配置文件和一个自述文件,其中包含您可以自定义的自动生成的描述性文本。ngnew还默认在工作区的根目录下创建一个骨架应用程序,以及它的端到端测试项目。框架是一个简单的Welcome应用程序,可以运行并且易于修改。此根应用程序与工作区同名,其源文件位于工作区的src/子文件夹中。此默认行为适用于典型的“多存储库”开发风格,其中每个应用程序都驻留在自己的工作区中。建议初学者和中级用户使用ngnew为每个应用程序创建一个单独的工作区。如下图所示:workspace和rootapp同名:Angular也支持包含多个项目的工作空间。这种开发环境适合开发可共享库的高级用户,以及使用“单一存储库”开发风格的企业,它只需要一个存储库,对所有Angular项目使用全局配置。SAPSpartacus采用了这种风格。要设置单个存储库工作区,您应该跳过创建根应用程序。多项目工作空间适用于对所有Angular项目使用单一存储库(单一存储库模型)和全局配置的企业。多项目工作区还为库开发提供支持。运行命令行:ngnewangular-monorepo--create-applicationfalse创建后的项目结构如下图所示:angular.json非常干净:然后就可以使用workspace中唯一的名字来生成applications和libraries:nggenerateapplicationjerry-first-app在添加了一个新的应用程序后,我们的Angular工作区发生了什么变化?查看此提交。第一个是angular.json。在projects节点下,新增了一个名为app的节点,projectType为application:,对应的architect为:package.json。因为有一个额外的Angular应用程序,我们需要angular-devkit/build-angular构建项目:工作区中第一个显式生成的应用程序将像工作区中的其他项目一样放置在projects/文件夹中。新生成的库也添加到projects/下。通过这种方式创建项目时,工作空间的文件结构与工作空间配置文件angular.json中的完全相同。从下图可以看出,左边projects/jerry-first-app中的层级结构与右边angular.json中的层级结构是一致的。接下来我们创建一个库:nggeneratelibrarymy-libangular.json文件在projects节点下,新增一个my-lib节点,其projectType类型为library:angular.json中的层级结构也与文件系统的目录:这个库有自己独立的package.json:更多Jerry的原创文章在这里:“汪子熙”: