时间:2021-05-25
1.创建项目
# PROJECT_NAME :创建的项目名称ng new PROJECT_NAME2.创建第三方包(我们要构建的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 publish6.使用发布的NPM包
安装我们发布的包
# NPM_PACKAGE_NAME :projects/LIBRARY_NAME/package.json 里面的 name,默认为:LIBRARY_NAMEnpm 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包
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
现在AngularCLI在npm下通过@angular/cli来替代angular-cli,并且它只支持Node6.9.0或更高的版本,npm3或更高的版本。所
Angular-CLI说到cli大家不陌生,每出一个框架都会有对应的cli,俗称脚手架。angular2本身提供了起步项目angular2-quickstart
最近在学习angular(AngularJS2),根据教程使用angular-cli新建项目,然而在添加JQuery和Bootstrap第三方库时遇到了问题..
详解Angular-cli生成组件修改css成less或sass的实例使用cli命令生成组件:nggeneratecomponent组件名生成出来的组件文件有:
两年前,写过一篇使用rollup来为生产环境编译Angular2应用的文章,因为当时还没有angular-cli项目。而如今Angular已经到了7.x版本,对