如何創建 Angular 庫並在 Angular 應用裏調用

把功能打包成庫會強迫庫中的工件與應用的業務邏輯分離。這有助於避免各種不良實踐或架構失誤,這些失誤會導致將來很難解耦和複用代碼。

把代碼放到一個單獨的庫中比簡單地把所有內容都放在一個應用中要複雜得多。它需要更多的時間投入,並且需要管理、維護和更新這個庫。不過,當把該庫用在多個應用中時,這種複雜性就會得到回報。

Angular 庫是一個 Angular 項目,它與應用的不同之處在於它本身是不能運行的。必須在某個應用中導入庫並使用它。

使用下面的命令行,創建一個庫:

ng generate library my-lib

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

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

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

這個庫無法單獨運行,那麼如何測試呢?

使用如下命令行。

ng build my-lib --configuration development
ng test my-lib
ng lint my-lib

要讓庫代碼可以複用,你必須爲它定義一個公共的 API。這個“用戶層”定義了庫中消費者的可用內容。該庫的用戶應該可以通過單個的導入路徑來訪問公共功能(如 NgModules、服務提供者和工具函數)。

庫的公共 API 是在庫文件夾下的 public-api.ts 文件中維護的。當你的庫被導入應用時,從該文件導出的所有內容都會公開。

下圖是一個例子:

我的 service 類:

請使用 NgModule 來暴露這些服務和組件: Use an NgModule to expose services and components.

如何消費我們自己開發的庫

直接在我們的 AppModule 的 imports 區域裏,導入我們的 Angular library 通過 public_api.ts 導出的 component 和 service 即可。

通過依賴注入,導入我們庫裏導出的 service 類的實例:

運行 Angular 應用,發現我們 Angular 庫裏的 service 打印出的字符串,說明 library 使用成功了:

如何使用 Angular 已經發布的庫

這些庫都是作爲 npm 包發佈的,它們通常都帶有一些與 Angular CLI 集成好的 schematic。要把可複用的庫代碼集成到應用中,你需要安裝該軟件包並在使用時導入它提供的功能。對於大多數已發佈的 Angular 庫,你可以使用 Angular CLI 的 ng add <lib_name> 命令。

比如 SAP Spartacus 的安裝命令行:

ng add @spartacus/schematics@latest

ng add 命令底層會使用 npm 包管理器或 yarn 來安裝庫包,並調用該包中的 schematic 在項目代碼中添加腳手架,比如添加 import 語句、添加 fonts,添加 themes 等。

使用 ng update <lib_name> 來單獨更新某個庫的版本。Angular CLI 會檢查庫中最新發布的版本,如果最新版本比你已安裝的版本新,就會下載它並更新你的 package.json 以匹配最新版本。

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

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

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