ng-packagr的npm地址:https://www.npmjs.com/package/ng-packagr
git地址:https://github.com/ng-packagr/ng-packagr
第一步:在你需要打成包得項目下安裝ng-packagr
yarn add ng-packagr --dev | -D
npm i ng-packagr --save-dev | -D
第二步:添加打包配置屬性
在項目得根目錄下添加兩個文件ng-package.json 和 public_api.ts,注意:兩個文件必須處于同級目錄。
第三步:編寫打包入口文件public_api.ts,所有希望在外部引用的對象,都需要在此文件中明確輸出。
export * from './src/app/modules/header/header.module'
第四步:編寫 ng-package.json
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "public_api.ts"
},
"whitelistedNonPeerDependencies": [
"."
]
}
1.為打包時,依賴項聲明為peerDependencies,發(fā)布帶有dependencies部分的npm軟件包package.json很容易導(dǎo)致將依賴關(guān)系的多個版本安裝到應(yīng)用程序的node_modules文件夾中。盡管這是服務(wù)器端或獨立程序上理想的解決方案,但它是前端構(gòu)建堆棧和UI技術(shù)中的錯誤的來源-您不想安裝兩個不同版本的Angular或RxJS。
為了減輕使用意外發(fā)布庫的風(fēng)險dependencies,ng-packagr dependencies在構(gòu)建時進行驗證。如果沒有明確將依賴項列入白名單,它將使構(gòu)建失敗。這是確保Angular庫生態(tài)系統(tǒng)健康的安全網(wǎng)。
2.如果你要打包得項目dependences下有依賴包,可以使用whitelistedNonPeerDependenciesng-packagr配置中的選項將其列入白名單。每個條目都將作為RegExp進行匹配。在ng-package.json添加如下屬性
whitelistedNonPeerDependencies": [ "."]
第五步:在package.json文件中添加packagr腳本命令,并將private屬性設(shè)置為false:并添加命令
"scripts": {
.....
"packagr": "ng-packagr -p ng-package.json"
},
"private": false,
第六步:執(zhí)行打包命令
yarn ngpack
結(jié)束后會生成一個dist文件夾,就是我們需要的library包了。還可以進一步將dist打包成tgz文件:
cd dist
npm pack
dist文件夾里就會多出一個ng-packagr-test-v0.0.0.tgz ,名稱和版本號均取自package.json。
這下你可以在本地其他項目里調(diào)用打包好的自定義包,進行測試,在其他項目里執(zhí)行
yarn add ../../ng-packagr-test/dist/ng-packagr-test-v0.0.0.tgz -D//相對路徑
安裝好后就可以向其他組件一樣在項目里調(diào)用了,例如,在AppModule里引入模塊:
....
import { HeaderModule } from 'ng-packagr-test';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
HeaderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
然后在app.component.html里即可引用header組件:
<app-header>Such Header</app-header>
第七步:通過自己的npm賬號發(fā)布到npmjs
1.如果你還沒有npm 賬號,請先去npm官網(wǎng)注冊,注冊地址https://www.npmjs.com/
2.有賬號后,執(zhí)行 npm login,按照提示輸入用戶名,郵箱等
3.執(zhí)行發(fā)布命令 npm publish ,發(fā)布成功后,可以登錄https://www.npmjs.com/查看自己發(fā)布的項目
發(fā)布得時候一定要注意發(fā)布包得版本號在npm上不重復(fù),要不然會報錯