Angular第三方庫開發實踐

原文連接

從接觸Angular到現在，作了很多Angular項目，使用了很多第三方庫，可是卻沒有勇氣觸碰第三方庫的開發，一是沒有太多的積累，二是沒有找到合適的「Hello world」的文檔。 最近有機會要把項目中經常使用的Component作成第三方庫，方便更多的項目使用。根據網上找到的各類資料，加上走的各類彎路，終於摸清楚了開發第三方庫的流程。

搭建項目框架

爲了方便第三方庫的開發，咱們首先要建立一個主應用A：

ng new projectnameA    //建立主應用
複製代碼

主應用A建立好以後，建立Lib：

cd projectnameA
ng g library libName --prefix  prefixName //--prefix是Lib使用的前綴
複製代碼

上述命令會對主應用以下改變：

1. 在主應用A下建立 projects/libName 目錄，並將Lib的相關文件放於此；

2. 在 angular.json 文件中添加 libName 項目；

   "libName": {
       "root": "projects/libName",
       "sourceRoot": "projects/libName/src",
       "projectType": "library",
       "prefix": "dteam-top",
       "architect": {
       "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
           "options": {
           "tsConfig": "projects/libName/tsconfig.lib.json",
           "project": "projects/libName/ng-package.json"
           },
           "configurations": {
           "production": {
               "project": "projects/libName/ng-package.prod.json"
           }
           }
       },
       "test": {...},
       "lint": {...}
       }
   }
   複製代碼

   其中： root爲Lib的根目錄； sourceRoot爲Lib的源代碼目錄； projectType爲項目的類型； prefix爲組件使用的前綴； architect爲Angular的構建配置，可設置 build、test 和 lint。

3. 在 package.json 文件中添加 ng-packagr 依賴；

4. 在 tsconfig.json 文件中添加 libName 庫的引用；

   {
       ...
       "paths": {
           "libName": [
               "dist/libName"
           ]
       }
       ...
   }
   複製代碼

這樣項目框架就搭建好了，能夠開始寫Lib的代碼了。

Lib開發

在Lib中須要注意一個文件：public_api.ts，這個文件是Lib的入口文件，取代了以前使用的index.ts文件，其中定義了Export的內容：

export * from './app/libName.component';
export * from './app/libName.module';
複製代碼

主應用A要使用Lib，在app.module.ts文件中直接引用：

import { LibNameModule } from '../../../../projects/libName/src/app/libName.module'

imports: [
    ...
    LibNameModule,
    ...
]
複製代碼

對於Lib中使用的其餘組件，可在主應用A下經過npm安裝，這裏提醒下，這裏是安裝到主應用A的目錄下，修改的是主應用A的package.json和package.lock.json文件。 這樣，就能夠開發本身的Lib了。

測試Lib的安裝

Lib開發好以後，須要先在本地試安裝。這時有疑問了，Lib中用到的其餘組件的引入都是在主應用A的package.json中聲明的，這對於Lib是不對滴。 細心的開發者會發現，在Lib的目錄下也有一個package.json文件，其缺省內容爲：

{
    "name": "libName",
    "version": "0.0.1",
    "peerDependencies": {
        "@angular/common": "7.0.2",
        "@angular/core": "7.0.2",
    }
}
複製代碼

咱們須要把這個文件補充完整，將Lib中用到的其餘第三方組件在peerDependencies中引入，並將Lib的其餘屬性也加入。例如：

{
    "name": "ligName",
    "version": "0.0.1",
    "keywords": ["keyword1","keyword2"],
    "license": "MIT",
    "author": "authorName",
    "description": "description",
    "peerDependencies": {
        "@angular/common": "7.0.2",
        "@angular/core": "7.0.2",
        "@angular/forms": "7.0.2",
        "@angular/router": "7.0.2",
        "@angular/cdk": "7.0.2",
        "@angular/material": "7.0.2",
        "ngx-spinner": "7.0.0",
        "ngx-clipboard": "12.0.0",
        "ethers": "4.0.27",
        "rxjs": "6.3.3"
    }
}
複製代碼

同時，還能夠添加一個README.md文件，介紹Lib的使用方法。 準備工做作好以後，將Lib編譯成產品：

ng build libName --prod
複製代碼

編譯後的文件會放置在主應用A的dist/libName目錄下。另外建立一個Angular應用B，在此應用下執行：

npm install 主應用A/dist/libName
複製代碼

安裝時會對libName使用的其餘第三方庫給出相似以下的提示：

npm WARN libName@0.0.1 requires a peer of @angular/core@^7.2.0 but none is installed. You must install peer dependencies yourself.
複製代碼

根據提示，自行安裝缺乏的組件便可。 在應用B的package.json中會看到對libName的引入：

"libName": "file:../projectnameA/dist/
複製代碼

在應用B的package-lock.json文件中加入以下內容：

"libName": {
    "version": "file:../projectnameA/dist/libName",
    "requires": {
    "tslib": "^1.9.0"
    },
    "dependencies": {
    "tslib": {
        "version": "1.9.3",
        "bundled": true
    }
    }
}
複製代碼

在應用B的app.module.ts文件中引入libName：

import { LibNameModule } from 'libName';

...
imports: [
    ...
    LibNameModule,
    ...
],
...
複製代碼

在應用B中能夠測試libName可否正常使用。

Lib發佈

上述過程結束後，就能夠將應用發佈到npm上。準備工做：

1. 在npm上註冊帳號。
2. 在命令行下執行：npm adduser，將帳號添加到本地。

好了，能夠發佈libName了。進入到projectnameA/dist/libName目錄下執行：

npm publish
複製代碼

看到了發佈成功提示，還有點小激動。進入到npm中，能夠看到已經發布成功的libName。 若是想刪除這個libName，可使用以下命令：

npm unpublish libNamet@0.0.1 --force
複製代碼

這裏須要特別注意的是：刪除後的libName，在24小時內不能再發布了，見以下提示：

npm ERR! libName cannot be republished until 24 hours have passed.
複製代碼

總結

npm爲第三方庫的開發還提供了一些便利的方法，如npm link命令。這些都有待咱們在從此的開發中摸索和體驗，以便更好的打磨精品組件。

附錄

在開發過程當中遇到了幾個錯誤，現彙總以下：

權限錯誤：

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You do not have permission to publish "libName". Are you logged in as the correct user? : libName
複製代碼

解決辦法，執行： npm adduser

libName若注入了其第三方的服務，主應用調用時出現以下錯誤：

Error: inject() must be called from an injection context
複製代碼

解決方法，在主應用的angular.json文件中添加：

"projects": {
    "projectName": {
        "architect": {
            "build": {
                "options": {
                    "preserveSymlinks":true
                },
            },
        }
    }
    }
},
複製代碼

若libName定義了本身的route，須要在主應用中注入RouterModule。