您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)使用ng-packagr怎么對Angular進行打包,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
如何使用
既然 ng-packagr 被 Angular Cli 內(nèi)置,這讓我們進一步簡化了生產(chǎn)一個 APF 規(guī)范格式的類庫的成本。在 Angualr Cli 里使用 ng g library
來創(chuàng)建一個類庫模板,例如在一個新的 Angular 應(yīng)用里執(zhí)行:
ng g library <library name>
而打包,則:
ng build <library name>
最終,將生成的 dist/<libary name>
目錄下文件上傳相應(yīng)包管理服務(wù)器(例如:npm)提供給其他 人使用。
配置說明
由 Angular Cli 生成的類庫模板大部分內(nèi)容同 Angular 應(yīng)用一樣,只是多了一個 ng-package.json
的配置文件(對于生產(chǎn)環(huán)境是 ng-package.prod.json
),它是專門針對 ng-packagr 的一個配置文件,如同 angular.json 一般也是基于 JSON Schema 格式,因此可以通過訪問ng-package.schema.json 了解所有細節(jié),以下描述一些重點項。
whitelistedNonPeerDependencies
ng-packagr 默認會根據(jù) package.json 的 peerDependencies
節(jié)點清單來決定類庫所需要第三方依賴包,這些依賴包是不會被打包至類庫。
然而,所依賴包不存在 peerDependencies
節(jié)點里時(當然建議需要依賴的項應(yīng)該在里面),就需要該屬性的配置。
lib/entryFile
指定入口文件。
lib/umdModuleIds
UMD 格式采用 rollup 打包,當類庫需要引用一些無法猜出正確 UMD 標識符時,就需要你手動映射這些類庫的標識。
"umdModuleIds": { "lodash": "_" }
angular.json
Angular Cli 配置文件 angular.json 內(nèi)會增加一個以 <libary name>
命名的構(gòu)建配置,絕大多數(shù)配置性同普通 Angular 應(yīng)用如出一轍,唯一不同的是 builder
節(jié)點為:
"builder": "@angular-devkit/build-ng-packagr:build"
次級入口
有時候一個類庫可能會包含著多個二次入口,就像 @angular/core
類庫包含著一個 @angular/core/testing
模塊,它只是運用于測試,因此并不希望在項目中引入 @angular/core
時也包含測試代碼,但同時二者又是同一個功能性時,這種次級導(dǎo)入顯得非常重要。
另一種像 ngx-bootstrap、@angular/cdk/ally 等都提供次級模塊的導(dǎo)入,可以更好的優(yōu)化體積。
不論出于何種目的,都可以通過 Angular Cli 簡單的文件組織進一步打包出主、次級分明的類庫。
ng g library
生成的結(jié)構(gòu)大概如下:
<libary name> ├── src | ├── public_api.ts | └── lib/*.ts ├── ng-package.json ├── ng-package.prod.json ├── package.json ├── tsconfig.lib.json └── tsconfig.spec.json
當根目錄下包含README.md
、LICENSE
時會自動被復(fù)制到dist
目錄中,Npm 規(guī)定必須包含 README.md 文件,否則訪問已發(fā)布類庫頁時會有未找到描述文件錯誤提示。
若想創(chuàng)建一個 <libary name>/testing
的次級入口,只需要在 <libary name>
根目錄下創(chuàng)建一個 testing
目錄:
<libary name> ├── src | ├── public_api.ts | └── lib/*.ts ├── ng-package.json ├── ng-package.prod.json ├── package.json ├── tsconfig.lib.json ├── tsconfig.spec.json └── testing ├── src | ├── public_api.ts | └── *.ts └── package.json
核心是需要提供一個 package.json
文件,而且內(nèi)容簡單到姥姥家。
{ "ngPackage": {} }
最后,依然使用 ng build <libary name>
,會產(chǎn)生一個次級導(dǎo)入模塊。
小結(jié)
至此,基本上利用 Angular Cli 可以快速的構(gòu)建一個可發(fā)布于 Npm Angular 類庫,更復(fù)雜的可以構(gòu)建像 ngx-bootstrap、@angular/cdk/* 類庫。
自定義構(gòu)建
Angular Cli 雖然提供非常便利的環(huán)境,但是對于一些復(fù)雜環(huán)境像 Delon 類庫(ng-alain基建系列類庫)包含著多個類庫、類庫又包含多個次級導(dǎo)入時,Angular Cli 會顯得有點啰嗦,特別是對每個類庫的 angular.json 配置。其實 @angular-devkit/build-ng-packagr 非常簡單,如果將取進一步簡化,整個實現(xiàn)差不多相當于:
const path = require('path'); const ngPackage = require('ng-packagr'); const target = path.resolve(__dirname, './projects/<libary name>'); ngPackage .ngPackagr() .forProject(path.resolve(target, `ng-package.prod.json`)) .withTsConfig(path.resolve(target, 'tsconfig.lib.json')) .build() .then(() => { // 構(gòu)建完成后干點事 });
將上面的代碼放到 ./build.js
,執(zhí)行:
node scripts/build.js
其結(jié)果完成是等價。
build()
返回的是一個 Promise
對象,意味著可以確保構(gòu)建開始前和結(jié)束后做一點額外的事。
看完上述內(nèi)容,你們對使用ng-packagr怎么對Angular進行打包有進一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。