详解如何构建一个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 AspxButton的客户端操作
Jun 26 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
使用node.js搭建服务器
May 20 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
使用JS动态显示文本
Sep 09 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
基于empty函数的判断详解
2013/06/17 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
python实现查询IP地址所在地
2015/03/29 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
谈谈python中GUI的选择
2018/03/01 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
Python tkinter label 更新方法
2018/10/11 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
Python对wav文件的重采样实例
2020/02/25 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
空指针到底是什么
2012/08/07 面试题
十佳大学生村官事迹
2014/01/09 职场文书
仓库管理制度
2014/01/21 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
行政处罚告知书
2015/07/01 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA