详解如何构建一个Angular6的第三方npm包


Posted in Javascript onSeptember 07, 2018

不废话直接上教程

1.建立项目

ng new projectname

详解如何构建一个Angular6的第三方npm包

2.创建第三方库

项目创建完毕,依赖安装完毕后

# libraryname : 第三方包名字
# prefix : 组件前缀(如 nz-zorro 的组件前都是 nz-xxx)
cd projectname
ng g library libraryname --prefix prefix

详解如何构建一个Angular6的第三方npm包

3.查看项目目录

详解如何构建一个Angular6的第三方npm包

多出一个projects目录,目录里就是刚才generate的第三方library

详解如何构建一个Angular6的第三方npm包

可以看到实际和 ng new 出的项目无多大差别,第三包的依赖直接加入package.json中,然后依赖的Module按照常规方法加入到src/app.module.ts即可.

4.愉快的构建自己的模块

详解如何构建一个Angular6的第三方npm包

图中是模块的导出文件,应该会去自动去扫描的,如果引用时遇到问题直接从public_api.ts导出然后重新打包即可

5.构建第三方包

这一步需要注意的是,打包前修改package.json中的项目信息,起码version信息需要修改

#切到根目录
cd 项目根目录路径
ng build mylibrary

详解如何构建一个Angular6的第三方npm包

看一眼打出的包

详解如何构建一个Angular6的第三方npm包

6.发布包

#切到目录
cd dist/mylibrary
#发布
npm publish

这里npm publish相关的可以自行百度

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

Javascript 相关文章推荐
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 #Javascript
You might like
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
2017/12/21 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
python中删除某个元素的方法解析
2019/11/05 Python
Python tkinter常用操作代码实例
2020/01/03 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
浅谈Python协程
2020/06/17 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
影视艺术学院毕业生自荐信
2013/11/13 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
对孩子的寄语
2014/04/09 职场文书
先进班集体事迹材料
2014/12/25 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
深入理解 Golang 的字符串
2022/05/04 Golang