Angular 如何爲多個項目使用單一存儲倉庫

Angular 工作區是 Angular project 的集合。Angular project 包含 application 和 library 兩種。

而用來創建或操作應用和庫的命令(比如 add 和 generate)必須在工作區目錄下才能執行。

ng new

上述命令行實際上創建的是一個新的工作區。

當你運行這個命令時,CLI 會在一個新的工作區中安裝必需的 Angular npm 包和其它依賴項,其根應用(root leavl application)名叫 my-project。 該工作區的根文件夾中包含一些工作區配置文件,和一個帶有自動生成的描述性文本的自述文件,你可以自定義它。

ng new 還會默認創建一個位於工作區根級的骨架應用,及其端到端測試項目。這個骨架是一個簡單的 Welcome 應用,它可以運行,也很容易修改。這個根應用與工作區同名,其源文件位於工作區的 src/ 子文件夾中。

這種默認行爲適用於典型的“多重(multi)repo”開發風格,每個應用都位於它自己的工作區中。建議初學者和中級用戶使用 ng new 爲每個應用創建一個單獨的工作區。

如下圖所示:工作區和根應用的名稱相同:

Angular 還支持包含多個項目的工作區。這種開發環境適用於正在開發可共享庫的高級用戶,以及那些使用“單一(mono)倉庫”開發風格的企業,它只需要一個倉庫,而且所有 Angular 項目都使用全局配置。

SAP Spartacus 就採取的該種風格。

要設置單一倉庫的工作區,你應該跳過創建根應用的過程。

多項目工作區適用於對所有 Angular 項目使用單一存儲庫(單倉庫模型)和全局配置的企業。多項目工作區也能爲庫開發提供支持。

運行命令行:

ng new angular-monorepo --create-application false

創建好之後的項目結構如下圖所示:

angular.json 裏很乾淨:

然後,你可以使用工作區內唯一的名字來生成應用和庫:

ng generate application jerry-first-app

添加了新的應用之後,我們的 Angular 工作區,到底發生了哪些變化?

查看這個 commit即可。

首先是 angular.json, 在 projects 節點下,增添了一個新的以 app 名稱命名的節點,projectType 爲 application:

以及對應的 architect:

package.json

因爲多了一個 Angular 應用,我們需要 angular-devkit/build-angular 對項目進行構建:

工作區中第一個顯式生成的應用會像工作區中的其它項目一樣放在 projects/ 文件夾中。新生成的庫也會添加到 projects/ 下。當你以這種方式創建項目時,工作區的文件結構與工作區配置文件 angular.json 中的結構完全一致。

從下圖能看出,左邊 projects/jerry-first-app 和右邊 angular.json 裏的層級結構一致。

下面我們創建一個庫:

ng generate library my-lib

angular.json 文件在 projects 節點下,多了一個 my-lib 節點,其 projectType 類型爲 library:

angular.json 裏的層級結構和文件系統的目錄同樣是一致的:

這個庫有屬於自己單獨的 package.json:

更多Jerry的原創文章,盡在:“汪子熙”:

本文同步分享在 博客“汪子熙”(CSDN)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章