npm run build:mylib

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

npm run 執行的目標 build:mylib, 定義在 package.json 裡：

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

實際執行的命令是：yarn --cwd feature-libs/my-lib && ng build my-lib --configuration production

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

ng build：把 Angular 應用編譯到給定輸出路徑下名為 dist/ 的輸出目錄中。此命令必須在工作空間目錄下執行。

當用於構建庫時，將呼叫其他構建器，並且僅應用 ts-config、configuration 和 watch 選項。

使用 CLI 建立專案時，預設情況下會建立 "production" 配置，並且可以透過指定 --configuration="production" 或 --prod 選項來使用該配置。

如果遇到錯誤訊息：

> [error] Error: Unable to write a reference to UrlPipe in C:/Code/SPA/mySPA/spartacus/projects/core/src/routing/configurable-routes/url-translation/url.pipe.ts from C:/Code/SPA/mySPA/spartacus/projects/core/src/routing/configurable-routes/url-translation/url.module.ts
    at ReferenceEmitter.emit (C:\Code\SPA\mySPA\spartacus\node_modules\@angular\compiler-cli\src\ngtsc\imports\src\emitter.js:85:19)

my-lib 為什麼和 core 資料夾下的 url.pipe.ts 有關聯？

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

建立一個空的 test-lib, 然後 ng build 之，看有無同樣的錯誤。

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

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

沒有任何問題。
![](https://img-blog.csdnimg.cn/img_convert/cda15e053c31bdcdad8eba3b0b166417.png)

我發現只要當我 import ICON_TYPE 之後，就會出現這個錯誤：

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

當我註釋掉上圖第2行程式碼之後，build 錯誤消失：

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

檢視 Spartacus 其他 library 的 ng-package.json 檔案，其 lib 區域有一個指向 @spartacus/storefront 的引用：

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

在新建的 test-lib service 裡新增 ICON_TYPE 的引用：

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

也立即出錯了：

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

經過研究發現，在 Angular 庫工程資料夾下面的 tsconfig.lib.json 檔案內，新增對 @Spartacus/core 和 @Spartacus/storefront 的引用即可解決問題：

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

成功 build 透過：

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

很多 JavaScript 庫，比如 jQuery、Jasmine 測試庫和 Angular，會透過新的特性和語法來擴充套件 JavaScript 環境。 而 TypeScript 編譯器並不能原生的識別它們。 當編譯器不能識別時，它就會丟擲一個錯誤。

可以使用TypeScript 型別定義檔案 —— .d.ts 檔案 —— 來告訴編譯器你要載入的庫的型別定義。
TypeScript 敏感的編輯器藉助這些定義檔案來顯示這些庫中各個特性的型別定義。
很多庫在自己的 npm 包中都包含了它們的型別定義檔案，TypeScript 編譯器和編輯器都能找到它們。Angular 庫也是這樣的。 任何 Angular 應用程式的 node_modules/@angular/core/ 目錄下，都包含幾個 d.ts 檔案，它們描述了 Angular 的各個部分。

這些 d.ts 檔案如下圖所示：

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

npm run 指令碼背後的事情

相關文章