使用Angular-CLI構建NPM包

1.建立項目

# PROJECT_NAME ：建立的項目名稱
ng new PROJECT_NAME

2.建立第三方包（咱們要構建的NPM包）

cd PROJECT_NAME

# LIBRARY_NAME ：建立的包的名稱(如 zorro)
# PREFIX ：組件前綴(如 nz-zorro 的組件前都是 nz-)
ng g library LIBRARY_NAME --prefix PREFIX

上面命令執行後會在咱們項目根目錄生成projects目錄，目錄裏就是剛纔generate的第三方library，以下圖：

3.構建本身的模塊

編輯模塊，實現咱們須要的功能，我在改模塊中加入了directive.ts和models.ts，以下圖：

directive.ts只在模塊內部使用，導入在當前module.ts裏，以下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NePreviewComponent } from './ne-preview.component';

import { ViewerDirectiveModule } from './ne-preview.directive';

@NgModule({
  imports: [
    BrowserModule,
    ViewerDirectiveModule # 這裏
  ],
  declarations: [NePreviewComponent],
  exports: [NePreviewComponent]
})
export class NePreviewModule { }

models.ts可能在外部使用，則需在public_api.ts導出，以下：

export * from './lib/ne-preview.service';
export * from './lib/ne-preview.component';
export * from './lib/ne-preview.module';

export * from './lib/ne-preview.model';   # 這個是新加，其餘爲自動生成

4.構建NPM包

打包前修改package.json中的項目信息，每次更新npm包需修改version，版本相同提交不上去，能夠手動修改，也可命令修改，以下：

npm version prepatch

更多操做

# 版本號從 1.2.3 變成 1.2.4-0，就是 1.2.4 版本的第一個預發佈版本。
npm version prepatch

# 版本號從 1.2.4-0 變成 1.3.0-0，就是 1.3.0 版本的第一個預發佈版本。
npm version preminor

# 版本號從 1.2.3 變成 2.0.0-0，就是 2.0.0 版本的第一個預發佈版本。
npm version premajor

# 版本號從 2.0.0-0 變成 2.0.0-1，就是使預發佈版本號加一。
npm version prerelease

編譯打包

#切到項目根目錄
cd 項目根目錄路徑
ng build LIBRARY_NAME

編譯成功，以下圖：

在項目根目錄會生成dist目錄，以下：

到這裏咱們的NPM包就製做完成了，接下來就是發佈到NPM倉庫～

5.發佈NPM包

這裏得先登陸NPM，

npm login # 詳細操做自行百度

#切到目錄
cd dist/LIBRARY_NAME
#發佈
npm publish

6.使用發佈的NPM包

安裝咱們發佈的包

#  NPM_PACKAGE_NAME ：projects/LIBRARY_NAME/package.json 裏面的 name，默認爲：LIBRARY_NAME
npm install NPM_PACKAGE_NAME

在項目app.module.ts中引入咱們建立的組件，以下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';

import { EchoImagePreviewModule } from './echo-image-preview/echo-image-preview.module';
import { EchoModuleModule } from 'echo-image-preview';
import { NePreviewModule } from 'ne-img-preview';    #  <===這裏


registerLocaleData(zh);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    EchoImagePreviewModule,
    EchoModuleModule,
    NePreviewModule  #  <===這裏
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

model.ts直接引用：

import { IMGLIST } from 'ne-img-preview';

組件使用，以下：

<ne-ne-preview [imgList]="imgList"></ne-ne-preview>

完整如初～～～

感謝：harlan：如何構建一個Angular6的第三方npm包

END～～～