[原文](https://www.willtaylor.blog/complete-guide-to-angular-libraries/)

# 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 定義。

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

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

這種格式稱為 [Angular Package Format](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview)，它是用作 ng-packagr 輸出的格式，ng-packagr 是 Angular CLI 用來編譯庫的工具。

庫檔案的專案結構：

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

首先，刪除現有的 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

現在的專案結構：
![](https://img-blog.csdnimg.cn/img_convert/8c6a0c6c19b7a9ed41b44e38784c41aa.png)

最佳實踐：

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

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

接下來，我們必須將我們建立的每個元件新增到其模組的匯出中：

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

我們現在更新 public_api.ts 以匯出庫中我們希望公開給消費應用程式的任何檔案：

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

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

# 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 來安裝它：

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

Angular library 學習筆記

相關文章