cd PROJECT_NAME
# LIBRARY_NAME:创建的包的名称(如佐罗)
#前缀:组件前缀(如nz-zorro的组件前都是新西兰)
ng g图书馆LIBRARY_NAME——prefix前缀
上面命令执行后会在我们项目根目录生成<代码> 项目目录,目录里就是刚才生成的第三方库,如下图:
3。构建自己的模块
编辑模块,实现我们需要的功能,我在改模块中加入了<代码> directive.ts 和<代码> models.ts>
<代码> directive.ts> module.ts 里,如下:
从“@angular/platform-browser”进口{BrowserModule};
从“@angular进口{NgModule}/核心”;
进口{NePreviewComponent}”。/ne-preview.component ';
进口{ViewerDirectiveModule}”。/ne-preview.directive ';
@NgModule ({
进口:[
BrowserModule,
ViewerDirectiveModule #这里
),
声明:[NePreviewComponent],
出口(NePreviewComponent):
})
出口类NePreviewModule {}
<代码> models.ts> public_api.ts>
出口*’。/lib/ne-preview.service ';
出口*’。/lib/ne-preview.component ';
出口*’。/lib/ne-preview.module ';
出口*’。/lib/ne-preview.model ';#这个是新加,其他为自动生成
4。构建NPM包
打包前修改<代码> package.json>
npm版本prepatch
更多操作
#版本号从1.2.3变成1.2.4-0,就是1.2.4版本的第一个预发布版本。
npm prepatch版本
#版本号从1.2.4-0变成1.3.0-0,就1.3.0是版本版本的第一个预发布版本。
npm preminor版本
#版本号从1.2.3变成2.0.0-0,就是2.0.0版本的第一个预发布版本。
npm premajor版本
#版本号从2.0.0-0变成2.0.0-1,就是使预发布版本号加一。
npm预映版
编译打包
#切到项目根目录
cd项目根目录路径
ng构建LIBRARY_NAME
编译成功,如下图:
在项目根目录会生成<代码> dist 目录,如下:
到这里我们的NPM包就制作完成了,接下来就是发布到NPM仓库~
5。发布NPM包
这里得先登录NPM,
npm登录#详细操作自行百度
#切到目录
cd dist/LIBRARY_NAME
#发布
npm发布
6。使用发布的NPM包
安装我们发布的包
# NPM_PACKAGE_NAME:项目/LIBRARY_NAME/包。json里面的名字,默认为:LIBRARY_NAME
npm安装NPM_PACKAGE_NAME
在项目<代码> app.module.ts>
从“@angular/platform-browser”进口{BrowserModule};
从“@angular进口{NgModule}/核心”;
进口{AppComponent}”。/app.component ';
从“@angular进口{BrowserAnimationsModule}/platform-browser/动画”;
从@angular/形式的进口{FormsModule};
从“@angular进口{HttpClientModule}/共同/http ';
从“@angular/普通”进口{registerLocaleData};
从“进口zh型@angular/共同/地区/zh型”;
从“进口{EchoImagePreviewModule}。/echo-image-preview echo-image-preview.module”;
从“echo-image-preview”进口{EchoModuleModule};
从“ne-img-preview”进口{NePreviewModule};# & lt;===这里
registerLocaleData (zh型);
@NgModule ({
声明:[
AppComponent
),
进口:[
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
EchoImagePreviewModule,
EchoModuleModule,
NePreviewModule # & lt;===这里
),
供应商:[],
引导(AppComponent):
})
出口类AppModule {}
