圆月山庄资源网 Design By www.vgjia.com
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包
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年10月09日
2024年10月09日
- 【原神手游】5.1版本更新维护预告
- 李锦华.1987-日与夜(LP版)【SOLO】【WAV+CUE】
- 伍珂玥.2014-伍珂玥【湾彩星辰】【FLAC分轨】
- 吕方.2001-旧情人·老情歌精选2CD【华纳】【WAV+CUE】
- 《星际战士2》¥219,《100% 鲜橙汁》¥7
- 手办鉴赏室:少女眼神颇有杀意!连衣裙勾勒傲人轮廓
- 未来可期的二次元大逃杀游戏——《白厄战境》简评
- 炉石传说死亡骑士卡组怎么搭配 死亡骑士最新卡组2024推荐
- 魔兽世界地下堡珍玩怎么升级 地下堡珍玩升级方法攻略分享
- 魔兽世界怎么获得泽克维尔的残血珍玩 泽克维尔的残血珍玩获取方式
- FrankSinatra-StrangersInTheNight(1966Jazz)[Flac24-96]
- 大原樱子《CAMON+5thAnniversaryBest~》2CD[24-96]flac
- Isgaard2003-GoldenKey(LimitedEdition)【WAV+CUE】
- 《合金装备3RE》伊娃定妆照公布:没被政确太好了
- 石家庄新增《黑神话:悟空》墙绘:小狐狸萍萍