详解如何构建一个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 相关文章推荐
Javascript中Eval函数的使用说明
Oct 11 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
详解Angular 4.x Injector
May 04 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
php文件系统处理方法小结
2016/05/23 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
JAVASCRIPT keycode总结
2009/02/04 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
微信小程序实现上传图片功能
2018/05/28 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
分享几道你可能遇到的python面试题
2017/07/24 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
物业客服专员岗位职责
2013/11/30 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
南湾猴岛导游词
2015/02/09 职场文书
医德医风自我评价2015
2015/03/03 职场文书
消防演习通知
2015/04/25 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书