详解如何构建一个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 相关文章推荐
IE与FireFox中的childNodes区别
Oct 20 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
JS数组的常用方法整理
Mar 31 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
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
javascript 文档的编码问题解决
2009/03/01 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python标准库inspect的具体使用方法
2017/12/06 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
python看某个模块的版本方法
2018/10/16 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
python基于win32api实现键盘输入
2020/12/09 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
请假条格式范文
2014/04/10 职场文书
环保倡议书范文
2014/05/12 职场文书
企业承诺书格式
2014/05/21 职场文书
企业宣传策划方案
2014/05/29 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
兴趣班停课通知
2015/04/24 职场文书
违纪开除通知书
2015/04/25 职场文书
中学音乐课教学反思
2016/02/18 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers