使用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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
js异常捕获方法介绍
Apr 10 Javascript
js动态切换图片的方法
Jan 20 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
详解vue挂载到dom上会发生什么
Jan 20 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
理解javascript async的用法
2017/08/22 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
vue中rem的配置的方法示例
2018/08/30 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
python 正确保留多位小数的实例
2018/07/16 Python
Python中捕获键盘的方式详解
2019/03/28 Python
python实现图片九宫格分割
2021/03/07 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
WxPython实现无边框界面
2019/11/18 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
业务部主管岗位职责
2014/01/29 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
幼儿园小班评语
2014/04/18 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
小学语文教学反思范文
2016/03/03 职场文书
Go语言基础map用法及示例详解
2021/11/17 Golang