原文

Use cases for Angular libraries

Angular 庫有 2 個常見用例：

• 構建可重用的組件庫以在應用程序之間共享。
• 構建共享服務層功能 - 例如。 用於處理外部數據源（例如 API）的客户端。

雖然有很多 Angular 庫非常適合項目的情況，但值得考慮您的用例是否屬於這些，因為它確實引入了一些維護開銷。 請記住，您始終可以將功能編寫為應用程序中共享 Angular 模塊的一部分，並在必要時將其提取到庫中。

Creating an Angular library project

我們將創建一個 Angular 庫，以及一個使用該庫的演示應用程序。 我們可以使用以下命令創建這些：

ng new example-component-library --create-application=false
cd example-component-library
ng generate library example-component-library
ng generate application example-component-library-app

使用 --create-application=false 標誌可以防止 Angular 創建名為“example-component-library”的應用程序，這是我們想要給庫本身而不是測試應用程序的名稱。

如果我們現在查看剛剛創建的工作區內部，我們可以看到有一個項目文件夾，其中包含每個庫（example-component-library）和應用程序（example-component-library-app）的子文件夾 我們剛剛生成的。 還有一個包含 e2e 測試項目的第三個文件夾，我們可以忽略它。

使用下面的命令行單獨 build library：

ng build --project=example-component-library

如果我們查看 dist 文件夾，我們將看到我們的庫已經構建，並且在 build 文件夾中，我們有許多不同的文件夾，其中包含適用於不同消費者的各種不同模塊格式的應用程序，以及一個包含 TypeScript 定義。

• bundles - UMD 模塊格式。
• esm5 - 主要使用 es5 的模塊格式，但也使用來自 es6 的導入/導出語法。
• esm2015 - 使用 es2015/es6 的模塊格式。
• fesm5 - esm5 的扁平化版本。
• fesm2015 -peerDependencies esm2015 的扁平化版本。
• lib - 庫的 TypeScript 定義。

這種格式稱為 Angular Package Format，它是用作 ng-packagr 輸出的格式，ng-packagr 是 Angular CLI 用來編譯庫的工具。

庫文件的項目結構：

首先，刪除現有的 example-component-library 模塊、組件和服務文件——我們不需要這些。

接下來我們將添加一個組件、一個管道和一個指令。 我們將遵循一種為每個模塊添加一個組件的模式——這將允許消費應用程序僅導入它感興趣的庫模塊，然後在構建過程中對所有其他模塊進行 tree shaken. 我強烈建議這樣做，因為隨着庫的增長，它確實會對應用程序包的大小產生影響。

• ng generate module components/foo
• ng generate component components/foo
• ng generate module pipes/bar
• ng generate pipe pipes/bar/bar
• ng generate module directives/baz
• ng generate directive directives/baz/baz

現在的項目結構：

最佳實踐：

每個模塊有一個組件，以允許對未使用的模塊/組件進行 tree shake 優化。

例外情況是始終一起使用的組件應保存在同一模塊中 - 例如。 如果您正在實現選項卡，則 TabGroupComponent 和 TabItemComponent 將位於同一模塊中。

接下來，我們必須將我們創建的每個組件添加到其模塊的導出中：

我們現在更新 public_api.ts 以導出庫中我們希望公開給消費應用程序的任何文件：

現在我們要做的就是重新構建，它就可以從應用程序中使用庫了。

Consuming our Angular library

開發環境

在開發過程中，使用我們庫的最佳方式是使用 npm link。 這將允許我們從消費應用程序的節點模塊文件夾中的目錄符號鏈接到庫的 dist 文件夾中的已編譯應用程序。

cd dist/example-component-library
npm link

我們可以從本地機器上的任何地方將一個 Angular 項目鏈接到這個庫。 從項目根文件夾：

npm link example-component-library

如果我們現在使用 watch 標誌運行庫，同時在另一個終端窗口中運行 ng serve。

ng build --project=example-component-library
ng serve

這將允許我們同時開發應用程序和（一個或多個）鏈接庫，並看到應用程序在每次修改庫源代碼時重新編譯。

生產環境

對於生產環境，我們將我們的庫發佈到 npm，然後使用 npm install 將其安裝到應用程序中。

首先，您需要創建一個 npm 帳户。 現在從命令行登錄：

npm login

From the project root folder:

cd dist/example-component-library
npm publish

我們的包現在發佈在 npm（公開）上，我們可以通過將它添加到我們的應用程序的 package.json 依賴項並運行 npm install 來安裝它：

"dependencies": {
    ...
    "example-component-library": "~0.0.1"
}

更多Jerry的原創文章，盡在："汪子熙":