将Angular6自己定義的子產品釋出成npm包

建立自己的子產品元件

1. ng new 一個工程

2. ng g m 建立子產品 例如我這裡的modules檔案下建立header子產品

3. ng g c modules/head 建立一個hear元件，内容随意

4. 将modules子產品exports出去，讓其他子產品可以使用

5. 做個測試在app子產品中引入modules子產品，并使用header元件

釋出前的準備

1.   安裝ng-packagr 并在devDependency中聲明

npm install ng-packagr --save-dev

2. 在工程跟目錄 （不是app，就是工程名開始的算跟目錄）下建立ng-package.json 

3. ng-package.json 

{
  "$ schema": "./node_modules/ng-packagr/ng-package.chema.json",
  "lib":{
     "entryFile": "public_api.ts"
  }
}      

4. 建立 public_api.ts檔案

5. public.api.ts 導入headermodule

export * from './src/app/modules/header/header.module';      

6. 在package.json檔案中寫入腳本，并将private值改為false

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "packagr": "ng-packagr -p ng-package.json"  // 插入
},
"private": false // 修改      

7. 删除package.json檔案中dependences字段的内容

8. 執行上面建立的腳本

npm run packagr      

執行之後你會發現，在你的工程的目錄下生成了一個叫做dist的輸入檔案

9. 進入dist檔案夾執行npm pack

10. 到npm官網中新增賬號

11. 在工程目錄下執行npm login指令設定賬号密碼和郵箱

12. 進入dist目錄執行npm publish 指令 

至此，一個npm包就能支援通過npm install下來了，可以檢視自己的npm賬戶，上回顯示自己的npm包有幾個，這裡要注意一下生成的dist檔案夾裡的package.json檔案管理了自定義包的名稱之類的資訊，包名不要重複

13. 最後一部就是測試~

作者：

承蒙時光

出處：

http://www.cnblogs.com/timetimetime/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。