使用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 相关文章推荐
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
JS实现简单的表格增删
Jan 16 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
详解如何构建一个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调用数据库的存贮过程!
2006/10/09 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
Python标准库之collections包的使用教程
2017/04/27 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
Python3多线程基础知识点
2019/02/19 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
婚假请假条格式及范文
2014/04/10 职场文书
推荐信格式要求
2014/05/09 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
银行转正自我鉴定
2014/09/29 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
Vue和Flask通信的实现
2021/05/19 Vue.js
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
利用Apache Common将java对象池化的问题
2022/06/16 Servers