本文使用的 Github 專案：https://github.com/wangzixi-diablo/angular-monorepo/commits/main

專案本地路徑：

C:\Code\SPA\angular-monorepo

Github commit 1：https://github.com/wangzixi-diablo/angular-monorepo/commit/a9da6b7d49e48ab60b43749fb45ea750fae8a5bd

在這個 commit 裡，在工作區 workspace 裡建立了一個新的型別為 application 的 project：
![](https://img-blog.csdnimg.cn/img_convert/ef56c33125341a2f1dbffc6419b621c8.png)

build 時使用的工具為：@angular-devkit/build-angular:browser

ng serve 時，使用的工具為：@angular-devkit/build-angular:dev-server

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

建立 Angular library 的 commit：

https://github.com/wangzixi-diablo/angular-monorepo/commit/221c15d4ef68b0d75783b4b5f81547296d650abd
對於 library 來說，使用的 build 工具是 packagr：

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

因此，在 package.json 裡自動匯入了 ng-packagr 的依賴：

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

如何消費：
![](https://img-blog.csdnimg.cn/img_convert/7a20828e87193892e4d620e8bdf42164.png)

注意第五行，這裡並沒有直接從檔案系統匯入 my-lib，而是使用了其名稱。

在工作區的 tsconfig.json 檔案裡，自動在 paths 裡新增了 my-lib 到磁碟上物理檔案的對映關係。這樣，ng build 時，看到 my-lib 的 symbol，就會到 dist/my-lib 資料夾裡查詢型別定義：
![](https://img-blog.csdnimg.cn/img_convert/1d1d0131cde7829e6fa1fd7b7de38560.png)

library 資料夾下的 package.json，指定了入口檔案為 public-api.ts:

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

我們在 Visual Studio Code 裡檢視 my-lib，滑鼠 hover 上去，能看到 module "my-lib" 的提示：

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

按住 ctrl 再點選左鍵，能看到其自動定位到 dist 資料夾的 my-lib.d.ts 裡：

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

ng build my-lib:

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

ng build 成功：
![](https://img-blog.csdnimg.cn/img_convert/b4d34d258620131c62dc62ea3ec7b496.png)

ng build --configuration production 成功：
![](https://img-blog.csdnimg.cn/img_convert/873c33950ec581fd136013c2164c2bfe.png)

dist 資料夾出現了 jerry-first-app:

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

最後執行成功：

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

這個專案裡還有一些其他檔案。

polyfills.ts：在 Web 開發中，polyfill 是在不支援該功能的 Web 瀏覽器上實現該功能的程式碼。 大多數情況下，它指的是實現 HTML5 或 CSS 網路標準的 JavaScript 庫，或者是舊瀏覽器上的既定標準（某些瀏覽器支援），或者現有瀏覽器上的提議標準（任何瀏覽器都不支援）。 正式地說，“polyfill 是瀏覽器 API 的墊片”。

無論瀏覽器是否支援，Polyfills 允許 Web 開發人員使用 API，並且通常開銷最小。 通常，他們首先檢查瀏覽器是否支援 API，如果可用就使用它，否則使用他們自己的實現。Polyfills 本身使用其他更受支援的特性，因此不同的瀏覽器可能需要不同的 polyfills。 該術語也用作動詞：polyfilling 為功能提供 polyfill。

如何建立 Angular library 並在生產環境中消費

相關文章