使用Angular-CLI构建NPM包的方法


Posted in Javascript onSeptember 07, 2018

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,如下图:

使用Angular-CLI构建NPM包的方法

3.构建自己的模块

编辑模块,实现我们需要的功能,我在改模块中加入了directive.tsmodels.ts,如下图:

使用Angular-CLI构建NPM包的方法

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

编译成功,如下图:

使用Angular-CLI构建NPM包的方法

在项目根目录会生成dist目录,如下:

使用Angular-CLI构建NPM包的方法

到这里我们的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包

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 #Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 #Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 #Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 #Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 #Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 #Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 #Javascript
You might like
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
Python实例之wxpython中Frame使用方法
2014/06/09 Python
python中异常报错处理方法汇总
2016/11/20 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python 字符串和整数的转换方法
2018/06/25 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
文秘专业应届生求职信范文
2013/11/14 职场文书
学校安全工作制度
2014/01/19 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
决心书标准格式
2014/03/11 职场文书
说明书格式及范文
2014/05/07 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
委托证明书
2014/09/17 职场文书
公务员年度个人总结
2015/02/12 职场文书
公司门卫岗位职责
2015/04/13 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
gateway网关接口请求的校验方式
2021/07/15 Java/Android