如何利用Angular-Cli建立庫
阿新 • • 發佈:2018-11-29
建立一個Angular庫總是一個被關注的話題,隨著Angular6的釋出,建立庫變得更統一和容易. 這篇文章介紹基於新的Angular-Cli來建立Angular的庫
一.ng-packagr
ng-packagr已整合到angular-cli中,不再需要手動安裝配置ng-packagr
二.環境,Angular-Cli 6+
三.建立專案並生成庫的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的子專案,生成子專案相關聯的檔案
2.更新angular.json檔案,新增build和test類庫的配置
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
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)
題外話: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 */)]
}
複製程式碼