使用Angular-CLI構(gòu)建NPM包的方法
1.創(chuàng)建項(xiàng)目
# PROJECT_NAME ：創(chuàng)建的項(xiàng)目名稱 ng new PROJECT_NAME
2.創(chuàng)建第三方包（我們要構(gòu)建的NPM包）
cd PROJECT_NAME # LIBRARY_NAME ：創(chuàng)建的包的名稱(如 zorro) # PREFIX ：組件前綴(如 nz-zorro 的組件前都是 nz-) ng g library LIBRARY_NAME --prefix PREFIX
上面命令執(zhí)行后會(huì)在我們項(xiàng)目根目錄生成projects目錄，目錄里就是剛才generate的第三方library，如下圖：
3.構(gòu)建自己的模塊
編輯模塊，實(shí)現(xiàn)我們需要的功能，我在改模塊中加入了directive.ts和models.ts，如下圖：
directive.ts只在模塊內(nèi)部使用，導(dǎo)入在當(dāng)前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導(dǎo)出，如下：
export * from './lib/ne-preview.service'; export * from './lib/ne-preview.component'; export * from './lib/ne-preview.module'; export * from './lib/ne-preview.model'; # 這個(gè)是新加，其他為自動(dòng)生成
4.構(gòu)建NPM包
打包前修改package.json中的項(xiàng)目信息，每次更新npm包需修改version，版本相同提交不上去，可以手動(dòng)修改，也可命令修改，如下：
npm version prepatch
更多操作
# 版本號(hào)從 1.2.3 變成 1.2.4-0，就是 1.2.4 版本的第一個(gè)預(yù)發(fā)布版本。 npm version prepatch # 版本號(hào)從 1.2.4-0 變成 1.3.0-0，就是 1.3.0 版本的第一個(gè)預(yù)發(fā)布版本。 npm version preminor # 版本號(hào)從 1.2.3 變成 2.0.0-0，就是 2.0.0 版本的第一個(gè)預(yù)發(fā)布版本。 npm version premajor # 版本號(hào)從 2.0.0-0 變成 2.0.0-1，就是使預(yù)發(fā)布版本號(hào)加一。 npm version prerelease
編譯打包
#切到項(xiàng)目根目錄 cd 項(xiàng)目根目錄路徑 ng build LIBRARY_NAME
編譯成功，如下圖：
在項(xiàng)目根目錄會(huì)生成dist目錄，如下：
到這里我們的NPM包就制作完成了，接下來(lái)就是發(fā)布到NPM倉(cāng)庫(kù)～
5.發(fā)布NPM包
這里得先登錄NPM，
npm login # 詳細(xì)操作自行百度
#切到目錄 cd dist/LIBRARY_NAME #發(fā)布 npm publish
6.使用發(fā)布的NPM包
安裝我們發(fā)布的包
# NPM_PACKAGE_NAME ：projects/LIBRARY_NAME/package.json 里面的 name，默認(rèn)為：LIBRARY_NAME npm install NPM_PACKAGE_NAME
在項(xiàng)目app.module.ts中引入我們創(chuàng)建的組件，如下：
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：如何構(gòu)建一個(gè)Angular6的第三方npm包
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS基礎(chǔ) ng-srcset 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-srcset 指令,這里對(duì)ng-srcset 指令做了詳細(xì)的資料整理，附有代碼示例，有需要的小伙伴可以參考下2016-08-08
本文主要介紹AngularJS國(guó)際化的知識(shí)，這里整理了相關(guān)資料和示例代碼以及實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08
AngularJS基礎(chǔ) ng-repeat 指令簡(jiǎn)單示例
本文主要講解AngularJS ng-repeat 指令,這里對(duì)ng-repeat的基礎(chǔ)資料做了整理，并附有示例代碼，有興趣的朋友可以參考下2016-08-08
angular+bootstrap的雙向數(shù)據(jù)綁定實(shí)例
本篇文章主要介紹angular+bootstrap的雙向數(shù)據(jù)綁定的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
AngularJS學(xué)習(xí)筆記之TodoMVC的分析
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記之TodoMVC的分析的相關(guān)資料,需要的朋友可以參考下2015-02-02
Angularjs 根據(jù)一個(gè)select的值去設(shè)置另一個(gè)select的值方法
今天小編就為大家分享一篇Angularjs 根據(jù)一個(gè)select的值去設(shè)置另一個(gè)select的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
下面小編就為大家?guī)?lái)一篇淺談AngularJS中ng-class的使用方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11![AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes]](http://img.jbzj.com/images/xgimg/bcimg7.png)
AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes]
這篇文章主要介紹了AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes] 的相關(guān)資料,需要的朋友可以參考下2017-01-01
利用angular自動(dòng)編譯andriod APK的繞坑經(jīng)歷分享
這篇文章主要給大家介紹了關(guān)于如何利用angular自動(dòng)編譯andriod APK的繞坑經(jīng)歷，文中通過(guò)示例代碼以及圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
本篇文章主要介紹了淺談angular.js跨域post解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08