将Angular6自己定义的模块发布成npm包
创建自己的模块组件
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. 最后一部就是测试~
作者:承蒙时光
出处:http://www.cnblogs.com/timetimetime/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。