假設我們要為 Spartacus UI 開發一個新功能，首先，這個新功能，應該放到 feature library 資料夾裡：

![](https://img-blog.csdnimg.cn/img_convert/8906b37d6cb5a11db9e90fdbc40efc30.png)

這個新功能的入口，放置到 Feature Module 中。

新功能透過 public_api.ts 將公有功能暴露給外部消費者。後者從 index.ts 裡匯入，而 index.ts 又匯入 quick-order.module.ts 中的內容。
![](https://img-blog.csdnimg.cn/img_convert/47381107eaa031bcbaab5cf357c21dbe.png)

QuickOrderModule 匯入 CoreModule 和 ComponentsModule，二者都是重量級 module，需要支援延遲載入。

![](https://img-blog.csdnimg.cn/img_convert/fb80f71eaf64df4c90a16e7ab8515c27.png)

ng-package.json 檔案裡，定義了該新功能的入口檔案 entryFile 為 public_api.ts:
![](https://img-blog.csdnimg.cn/img_convert/9bdebe99b18ad71a7e36057f5f4b4c63.png)

注意，在根目錄 angular.json 裡，我們找不到和 quick order 相關的實現，這說明 Quick Order 並不是一個獨立的 library？
![](https://img-blog.csdnimg.cn/img_convert/d0823d62b31e8087703cfa158bb46775.png)

這裡說明 quick order 是 cart library 的一部分：
![](https://img-blog.csdnimg.cn/img_convert/76b1bc4f9aa27afffa900c0aef60a460.png)

從這裡的資料夾層級結構也能說的通：
![](https://img-blog.csdnimg.cn/img_convert/8a2f9d2fe4d58552ef79c6b8cd2079ed.png)

對於 QuickOrder 這個新功能來說，其入口並不是我們上圖看到的 QuickOrderModule，而是下圖所示的 QuickOrderFeatureModule，後者包含了一個輕量級的 QuickOrderRootModule 實現，而上圖看到的重量級實現 QuickOrderModule，透過延遲載入的方式，在下圖程式碼第20行匯入系統。
![](https://img-blog.csdnimg.cn/img_convert/ca11c6fdf0c6baa1f80cb0db7fc5f448.png)

Root 資料夾裡的 QuickOrderRootModule 是一個非常輕量級的實現：

![](https://img-blog.csdnimg.cn/img_convert/0d3684e0f9c3f71c028342025d4170fd.png)

僅僅包含了路由設定和 CMS Component 對映關係的維護。

Facade 層透過 index.ts 匯出：
![](https://img-blog.csdnimg.cn/img_convert/2e675bf9b93e4938b339c87580bb5fd8.png)

然後 public_api.ts 匯出 index.ts 的全部內容：

![](https://img-blog.csdnimg.cn/img_convert/02a78eaceb28aef51665158b450799ab.png)

為什麼要設計這個 public_api.ts 呢？為了讓語義更加清楚。這個最佳實踐定義在[此處](https://github.com/nrwl/nx/issues/155)。

* public_api.ts 旨在列舉和公開特定功能以供外部使用。 * index.ts 旨在作為預設匯出機制來棄用絕對路徑匯入。

更詳細的討論：

(1) 消歧：鑑於缺少“內部”修飾符和內部模組增加的複雜性，需要多個 index.ts 桶檔案來提供不同的內部/外部 API 表面。

(2) Angular CLI 面向使用者的工具：為了提供省力的工具預設值，需要一個公共 API 檔案標準。 NG 編譯器所做的不僅僅是將所有 TypeScript 構建為 JavaScript；值得注意的是，它還會根據選擇的入口點進行搖樹。出於其他原因， index.ts 是預設的糟糕選擇。

(3) Angular 內部程式碼質量：public-api 是與 Angular 消費者的契約，必須嚴格控制，伴隨著文件變化、新測試、相容性評估和公告的變化。為此，專案設定會自動拒絕導致 public-api 更改的程式碼更改。

(4) 意識/清晰度/意圖：我認為這通常是其他評論所暗示的。歷史上，人們一直在使用 index.ts 來處理內部和外部的所有事情。當然，一個專案只能將 index.ts 用於公共 API 簽名，但這並不明顯。

SAP 電商雲 Spartacus UI 支援延遲載入的新功能的入口設計

相關文章