本文使用的 Github 項(xiàng)目：https://github.com/wangzixi-diablo/angular-monorepo/commits/main

項(xiàng)目本地路徑：

C:\Code\SPA\angular-monorepo

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

在這個(gè) commit 里，在工作區(qū) workspace 里創(chuàng)建了一個(gè)新的類型為 application 的 project：

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

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

創(chuàng)建 Angular library 的 commit：

https://github.com/wangzixi-diablo/angular-monorepo/commit/221c15d4ef68b0d75783b4b5f81547296d650abd
對(duì)于 library 來(lái)說(shuō)，使用的 build 工具是 packagr：

因此，在 package.json 里自動(dòng)導(dǎo)入了 ng-packagr 的依賴：

如何消費(fèi)：

注意第五行，這里并沒(méi)有直接從文件系統(tǒng)導(dǎo)入 my-lib，而是使用了其名稱。

在工作區(qū)的 tsconfig.json 文件里，自動(dòng)在 paths 里添加了 my-lib 到磁盤(pán)上物理文件的映射關(guān)系。這樣，ng build 時(shí)，看到 my-lib 的 symbol，就會(huì)到 dist/my-lib 文件夾里查找類型定義：

library 文件夾下的 package.json，指定了入口文件為 public-api.ts:

我們?cè)?Visual Studio Code 里查看 my-lib，鼠標(biāo) hover 上去，能看到 module “my-lib” 的提示：

按住 ctrl 再點(diǎn)擊左鍵，能看到其自動(dòng)定位到 dist 文件夾的 my-lib.d.ts 里：

ng build my-lib:

ng build 成功：

ng build --configuration production 成功：

dist 文件夾出現(xiàn)了 jerry-first-app:

最后運(yùn)行成功：

這個(gè)項(xiàng)目里還有一些其他文件。

polyfills.ts：在 Web 開(kāi)發(fā)中，polyfill 是在不支持該功能的 Web 瀏覽器上實(shí)現(xiàn)該功能的代碼。 大多數(shù)情況下，它指的是實(shí)現(xiàn) HTML5 或 CSS 網(wǎng)絡(luò)標(biāo)準(zhǔn)的 JavaScript 庫(kù)，或者是舊瀏覽器上的既定標(biāo)準(zhǔn)（某些瀏覽器支持），或者現(xiàn)有瀏覽器上的提議標(biāo)準(zhǔn)（任何瀏覽器都不支持）。 正式地說(shuō)，“polyfill 是瀏覽器 API 的墊片”。

無(wú)論瀏覽器是否支持，Polyfills 允許 Web 開(kāi)發(fā)人員使用 API，并且通常開(kāi)銷(xiāo)最小。 通常，他們首先檢查瀏覽器是否支持 API，如果可用就使用它，否則使用他們自己的實(shí)現(xiàn)。Polyfills 本身使用其他更受支持的特性，因此不同的瀏覽器可能需要不同的 polyfills。 該術(shù)語(yǔ)也用作動(dòng)詞：polyfilling 為功能提供 polyfill。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的如何创建 Angular library 并在生产环境中消费的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。