建立Angular npm庫

BIRD發表於2018-11-28
AngularNPM

建立一個Angular庫總是一個被關注的話題,隨著Angular6的釋出,建立庫變得更統一和容易. 這篇文章介紹基於新的Angular-Cli來建立Angular的庫

一.ng-packagr

ng-packagr已整合到angular-cli中,不再需要手動安裝配置ng-packagr

二.環境,Angular-Cli 6+

image

三.建立專案並生成庫的Project

yarn global add @angular/cli   // 升級到Angular6+

ng new handle-batch-error       // 建立新專案

cd handle-batch-error       

ng g library batch-error        // 建立庫!!
複製程式碼

四. ng g library

這個指令做了三件事:

1.建立projects為batch-error的子專案,生成子專案相關聯的檔案

img

2.更新angular.json檔案,新增build和test類庫的配置

img

3.安裝一些用於build庫的packages

tips1:

我們新建一個專案(handle-batch-error)後,再ng g library時,通常情況是想要library的名字和專案名相同,但ng g library卻不能再命名為相同的名稱(即handle-batch-error,事實上是不能和angular.json中的project name相同).

解決辦法:改為駝峰命名即handleBatchError,生成的檔案及package.json均和專案名(handle-batch-error)相同，而angular.json中生成的專案名為handleBatchError,

五.projects中檔案介紹

1.ng-package.json

ng-packagr用來build的配置檔案

2.package.json

類庫的資訊檔案.

注意:開發庫時，不應該隨便用dependencies，而應該用peerDependencies。

3.src\public_api.ts

這是庫的entryFile,你需要匯出的所有內容都在這裡面

export * from './lib/services/batch-error.service';
export * from './lib/batch-error.component';
export * from './lib/batch-error.module';
export * from './lib/constant/component.value';
複製程式碼

src內就如同我們正常開發angular專案一樣,並無區別

六.build

執行 ng build batch-error --prod,生成dist

img

tips2:angular.json中可以指定"defaultProject": "batch-error",執行ng build --prod即可

tips3:Angular支援打包生成多種可被使用的方式,具體介紹:

docs.google.com/document/d/…, 需翻牆

cd到dist/batch-error,執行npm publish,釋出到npm倉庫

七.使用類庫

// module中引入類庫
import {BatchErrorModule} from 'batch-error';

@NgModule({
  imports: [
    CommonModule,
    BatchErrorModule
  ]
})
複製程式碼
<!--html中使用元件-->
<lib-batch-error [statusId]="statusId"></lib-batch-error>
複製程式碼

參考文件:

1.Building an Angular Library with the Angular CLI (version 6)

2.使用 ng-packagr 打包 Angular

題外話:Vue的元件庫打包,我是用的rollup,相當簡單的配置,還有什麼推薦的嗎?

// rollup.config.js
import VuePlugin from 'rollup-plugin-vue'
export default {
  input: './src/index.js',
  output: {
    file: './dist/bundle.js',
    format: 'es'
  },
  plugins: [VuePlugin(/* VuePluginOptions */)]
}
複製程式碼

相關文章