使用Angular-CLI構(gòu)建NPM包的方法

1.創(chuàng)建項目

創(chuàng)新互聯(lián)公司專注于棗強企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站建設(shè)。棗強網(wǎng)站建設(shè)公司,為棗強等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

# PROJECT_NAME ：創(chuà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í)行后會在我們項目根目錄生成projects目錄，目錄里就是剛才generate的第三方library，如下圖：

使用Angular-CLI構(gòu)建NPM包的方法

3.構(gòu)建自己的模塊

編輯模塊，實現(xiàn)我們需要的功能，我在改模塊中加入了directive.ts和models.ts，如下圖：

使用Angular-CLI構(gòu)建NPM包的方法

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'; # 這個是新加，其他為自動生成

4.構(gòu)建NPM包

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

npm version prepatch

更多操作

# 版本號從 1.2.3 變成 1.2.4-0，就是 1.2.4 版本的第一個預(yù)發(fā)布版本。
npm version prepatch

# 版本號從 1.2.4-0 變成 1.3.0-0，就是 1.3.0 版本的第一個預(yù)發(fā)布版本。
npm version preminor

# 版本號從 1.2.3 變成 2.0.0-0，就是 2.0.0 版本的第一個預(yù)發(fā)布版本。
npm version premajor

# 版本號從 2.0.0-0 變成 2.0.0-1，就是使預(yù)發(fā)布版本號加一。
npm version prerelease

編譯打包

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

編譯成功，如下圖：

使用Angular-CLI構(gòu)建NPM包的方法

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

使用Angular-CLI構(gòu)建NPM包的方法

到這里我們的NPM包就制作完成了，接下來就是發(fā)布到NPM倉庫～

5.發(fā)布NPM包

這里得先登錄NPM，

npm login # 詳細操作自行百度

#切到目錄
cd dist/LIBRARY_NAME
#發(fā)布
npm publish

6.使用發(fā)布的NPM包

安裝我們發(fā)布的包

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

在項目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)建一個Angular6的第三方npm包

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文標題：使用Angular-CLI構(gòu)建NPM包的方法
路徑分享：http://bm7419.com/article14/pcgjde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、云服務(wù)器、ChatGPT、網(wǎng)站建設(shè)、網(wǎng)站策劃、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容