寫在前面
為了讓 Angular 類庫應用范圍更自由,Angular 提出一套打包格式建議名曰:Angular Package Format,包括 FESM2015、FESM5、UMD、ESM2015、ESM5、ES2015 格式,不同格式可以在不同的環境(Angular Cli、Webpack、SystemJS等)中使用。
傳統方式需要對這些格式逐一打包,一個示例打包腳本寫法。這種寫法只能針對不同項目的配置,而且除非你了解這些格式的本質否則很難維護;后來社區根據 APF 規范實現了類庫 ng-packagr,通過簡單的配置可以將你的類庫打包成 APF 規范格式。
至 V6 以后 Angular Cli 也基于 ng-packagr 實現了另一個 @angular-devkit/build-ng-packagr 應用構建器。
如何使用
既然 ng-packagr 被 Angular Cli 內置,這讓我們進一步簡化了生產一個 APF 規范格式的類庫的成本。在 Angualr Cli 里使用 ng g library 來創建一個類庫模板,例如在一個新的 Angular 應用里執行:
ng g library <library name>
而打包,則:
ng build <library name>
最終,將生成的 dist/<libary name> 目錄下文件上傳相應包管理服務器(例如:npm)提供給其他 人使用。
配置說明
由 Angular Cli 生成的類庫模板大部分內容同 Angular 應用一樣,只是多了一個 ng-package.json 的配置文件(對于生產環境是 ng-package.prod.json),它是專門針對 ng-packagr 的一個配置文件,如同 angular.json 一般也是基于 JSON Schema 格式,因此可以通過訪問ng-package.schema.json 了解所有細節,以下描述一些重點項。
whitelistedNonPeerDependencies
ng-packagr 默認會根據 package.json 的 peerDependencies 節點清單來決定類庫所需要第三方依賴包,這些依賴包是不會被打包至類庫。
然而,所依賴包不存在 peerDependencies 節點里時(當然建議需要依賴的項應該在里面),就需要該屬性的配置。
lib/entryFile
指定入口文件。
lib/umdModuleIds
UMD 格式采用 rollup 打包,當類庫需要引用一些無法猜出正確 UMD 標識符時,就需要你手動映射這些類庫的標識。
"umdModuleIds": {  "lodash": "_"}angular.json
Angular Cli 配置文件 angular.json 內會增加一個以 <libary name> 命名的構建配置,絕大多數配置性同普通 Angular 應用如出一轍,唯一不同的是 builder 節點為:
"builder": "@angular-devkit/build-ng-packagr:build"
次級入口
有時候一個類庫可能會包含著多個二次入口,就像 @angular/core 類庫包含著一個 @angular/core/testing 模塊,它只是運用于測試,因此并不希望在項目中引入 @angular/core            
新聞熱點
疑難解答
圖片精選