Angular 開發NPM第三方包


步驟:

創建第三方包 》 開發第三方包 》 測試第三方包 》 發布第三方包 》 使用第三方包

實例:

第一步:創建第三方包;; (創建項目,項目下創建第三方庫)

1. 新建項目

ng new zerolibrary

2. 創建第三方庫

// 目錄切換至新創建的項目
cd zerolibrary

// 創建第三方庫 (--prefix: 前綴;在用命令行新建組件/指令時,selector的屬性值的前綴)
ng g library zero --prefix zm

=== >目錄結構 (多了projects目錄)

第二步:開發第三方包;;(在第三方庫中新建組件、模塊)

1. 第三方庫中新建button組件

// 切換至第三方庫創建組件的位置
cd projects/zero/src/lib

// 新建組件
ng g c button
====> 目錄結構

2. 第三方庫的模塊中導出新建組件,可供外部模塊使用

// zero.module.ts
exports: [ButtonComponent]

第三步:測試第三方包;;;(本地測試第三方包中模塊、組件是否可用)

1. app.module.ts中導入第三方包的模塊文件

// 配置app.module.ts
imports: [ZeroModule]

2. app.component.html中使用第三方包的ButtonComponent組件

<zm-buttom></zm-button>

3. 瀏覽器訪問localhost:4201

第四步:發布第三方包;;;(npm測試無問題,發布)

1. 構建npm包

// 切換至第三方包根目錄下
cd projects/zero
// 構建
ng build zero
====>目錄結構 (多了dist目錄)

2. 發布至npm官網

// 需要登錄(npm login),有自己的npm賬號
npm publish

第五步:使用第三方包;;;(別的項目使用自己新建發布的NPM包)

1. 項目中安裝

npm install zero@latest --save

2. 在需要使用NPM包的模塊中引入NPM包模塊

imports: [ZeroModule]

3. 在組件中使用即可

<zm-button></zm-buttom>

發布過程中的問題:

npm ERR! publish Failed PUT 403

原因一: 當前電腦所使用的npm源未在npm官網上

解決: nrm use npm ,然后再publish

原因二: 該npm包已經在共有npm網站上存在了

解決:更改package.json文件中的“name”值,然后再publish


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM