博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
将Angular6自己定义的模块发布成npm包
阅读量:6836 次
发布时间:2019-06-26

本文共 1192 字,大约阅读时间需要 3 分钟。

创建自己的模块组件

1. ng new 一个工程

2. ng g m 创建模块 例如我这里的modules文件下创建header模块

3. ng g c modules/head 创建一个hear组件,内容随意

4. 将modules模块exports出去,让其他模块可以使用

5. 做个测试在app模块中引入modules模块,并使用header组件

发布前的准备

1.   安装ng-packagr 并在devDependency中声明

npm install ng-packagr --save-dev

2. 在工程跟目录 (不是app,就是工程名开始的算跟目录)下创建ng-package.json 

3. ng-package.json 

{  "$ schema": "./node_modules/ng-packagr/ng-package.chema.json",  "lib":{     "entryFile": "public_api.ts"  }}

4. 创建 public_api.ts文件

5. public.api.ts 导入headermodule

export * from './src/app/modules/header/header.module';

6. 在package.json文件中写入脚本,并将private值改为false

"scripts": {  "ng": "ng",  "start": "ng serve",  "build": "ng build",  "test": "ng test",  "lint": "ng lint",  "e2e": "ng e2e",  "packagr": "ng-packagr -p ng-package.json"  // 插入},"private": false // 修改

7. 删除package.json文件中dependences字段的内容

8. 执行上面创建的脚本

npm run packagr

执行之后你会发现,在你的工程的目录下生成了一个叫做dist的输入文件

9. 进入dist文件夹执行npm pack

10. 到npm官网中注册账号

11. 在工程目录下执行npm login命令设置账号密码和邮箱

12. 进入dist目录执行npm publish 命令 

至此,一个npm包就能支持通过npm install下来了,可以查看自己的npm账户,上回显示自己的npm包有几个,这里要注意一下生成的dist文件夹里的package.json文件管理了自定义包的名称之类的信息,包名不要重复

13. 最后一部就是测试~

作者:

出处:
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

你可能感兴趣的文章
thinkphp源码分析(三)—自动加载篇(Loader的分析)
查看>>
Blink 真香
查看>>
一块听听:Mixin 主网上线语音直播文字稿
查看>>
brew安装错误brew Error: /usr/local must be writable!
查看>>
可应用于实际的14个NLP突破性研究成果(三)
查看>>
[LeetCode] 41. First Missing Positive
查看>>
阿里如何将“高峰前扩容、高峰后缩容”的梦想照进现实?
查看>>
分布式系统关注点——初识「高可用」
查看>>
Node.js学习之路22——利用cheerio制作简单的网页爬虫
查看>>
聊一聊我对 React Context 的理解以及应用
查看>>
很多程序员都不会的问题,你知道多少?
查看>>
Scrapy-redis分布式组件
查看>>
package.json里的一些属性讲解
查看>>
leetcode 12 Integer to Roman
查看>>
Swoole+Lumen:同步编程风格调用MySQL异步查询
查看>>
探索 JUC 之美---Future 与 FutureTask
查看>>
《Java RESTful Web Service实战》第一章的实现补漏
查看>>
smarty 中的for循环
查看>>
gitlab+jenkins+maven+docker持续集成(十一)——sonarqube及sonarscanner代码审查
查看>>
linux5中实现DNS转换
查看>>