使用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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
vue-resourc发起异步请求的方法
Feb 11 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实现快速排序法函数代码
2012/08/27 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
详解redux异步操作实践
2018/08/15 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Python的高阶函数用法实例分析
2019/04/11 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
介绍一下linux的文件权限
2014/07/20 面试题
即将毕业大学生自荐信
2014/01/24 职场文书
项目投资意向书
2014/04/01 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
人力资源部工作计划
2019/05/14 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
opencv检测动态物体的实现
2021/07/21 Python
Vue2.0搭建脚手架
2022/03/13 Vue.js