详解如何构建一个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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
JavaScript 的继承
Oct 01 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 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
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
python实现车牌识别的示例代码
2019/08/05 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
华为C++笔试题
2014/08/05 面试题
小学新学期寄语
2014/04/02 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
银行转正自我鉴定
2014/09/29 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书