angular?cli不僅可以很方便的讓開(kāi)發(fā)者創(chuàng)建自己的項(xiàng)目其弊，組件巫橄，模塊慕爬，變異等窑眯，?還可以實(shí)現(xiàn)創(chuàng)建和發(fā)布自己的庫(kù)（library）。這里主要還用到了ng-packagr的庫(kù)医窿。下面我們看下步驟
參考文章：?Building an Angular 4 Component Library with the Angular CLI and ng-packagr
安裝node磅甩，?npm，?angular?cli
npm?install @angularcli -g
創(chuàng)建我們的angular項(xiàng)目
ng?new?my-component-library
cd進(jìn)入項(xiàng)目路徑下安裝依賴姥卢，啟動(dòng)
cd?my-component-library
npm install
ng serve
這時(shí)候卷要，我們的項(xiàng)目啟動(dòng)起來(lái)了，可以通過(guò)localhost：4200訪問(wèn)了独榴。
下面讓我們創(chuàng)建一個(gè)header的組件并做成通用的lib來(lái)使用僧叉。
創(chuàng)建header?模塊/組件
ng?generate?module?modules/header
創(chuàng)建組件
ng?generate?component?modules/header
然后在src/app/modules/header下會(huì)創(chuàng)建如下文件
header.component.css
header.component.html
header.component.spec.ts
header.component.ts
header.module.ts
編寫(xiě)header內(nèi)容
header.component.html
<h1>? ? <ng-content></ng-content>
<h1>
加樣式
header.component.css
h1 {
? ? color: red;
}
導(dǎo)出我們編寫(xiě)的lib
在header.module.ts里添加export數(shù)組將HeaderModule加進(jìn)去
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header.component';
@NgModule({
? ? ? ? imports:? [
? ? ? ? ? ? ? ? CommonModule
? ? ? ? ],
? ? ? ? ?declarations:? [
? ? ? ? ? ? ? ? HeaderComponent
? ? ? ? ?],
? ? ? ? ?exports:? [
? ? ? ? ? ? ? ? HeaderComponent
? ? ? ? ? ]
})
export class HeaderModule { }
這樣就將我們的HeaderMoudle導(dǎo)出可以在其他地方使用了。
在app.component.html里使用
先將header Module?import進(jìn)來(lái)棺榔。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// import our module
import { HeaderModule } from './modules/header/header.module';
@NgModule({
????????declarations: [
????????????????AppComponent
????????],
????????imports: [
????????????????BrowserModule,
????????????????HeaderModule // import it into our @NgModule block
????????],
????????providers: [],
????????bootstrap: [AppComponent]
})
export class AppModule { }
使用app.component.html
<app-header>Such Header</app-header>
這時(shí)候啟動(dòng)瓶堕，如果能看到起作用了，說(shuō)明開(kāi)發(fā)完成就準(zhǔn)備打包症歇。如果有問(wèn)題修改代碼fix問(wèn)題郎笆。
ng-packagr
安裝
ng?install ng-packagr --save-dev
或者將ng-packagr的配置加到package.json內(nèi)執(zhí)行
npm?install
我們需要添加2個(gè)文件到我們的項(xiàng)目ng-package.json和public_api.ts
ng-package.json是用來(lái)配置ng-packagr和找到public_api.ts的路徑
ng-package.json
{
????"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
????"lib": {
????????????"entryFile": "public_api.ts"
????}
}
Tips：?如果有whitelistedNonPeerDependencies報(bào)錯(cuò)，在ng-package.json加入如下代碼：
{
? "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
? "lib": {
? ? ????"entryFile": "public_api.ts"
? },
? "whitelistedNonPeerDependencies": [
? ????? "."
? ]
}
在public-api.ts導(dǎo)出header.module.ts
export * from './src/app/modules/header/header.module'
在package.json里配置ng-packagr的命令忘晤。（將private改成false以備將來(lái)要發(fā)布才library）
"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
這時(shí)候我們就可以打包我們的package了
運(yùn)行
npm?run?packagr
完成的時(shí)候會(huì)在根目錄下生成dist目錄宛蚓，這就是我們的library了，可以再進(jìn)入dist目錄壓縮
cd?dist
npm?pack
這時(shí)候在此目錄下就生成
my-component-library-0.0.0.tgz
版本號(hào)是在package.json里定義的设塔。這時(shí)候我們可以將此包通過(guò)npm?install?安裝就可以使用了 凄吏。
npm?install? ../此包的相關(guān)路徑/my-component-library-0.0.0.tgz在app.module.ts里import進(jìn)去就可以使用了。
當(dāng)然也可以發(fā)布到npm
需要
npm?loggin
登錄到npm
然后
npm?publishe?dist
發(fā)布出去就可以了闰蛔。這里就沒(méi)有發(fā)布了竞思，需要發(fā)布的可以去嘗試。遇到問(wèn)題在谷歌吧钞护。
