将Angular6自己定义的模块发布成npm包

简介: 创建自己的模块组件1. ng new 一个工程2. ng g m 创建模块 例如我这里的modules文件下创建header模块3. ng g c modules/head 创建一个hear组件,内容随意4.

创建自己的模块组件

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

相关文章
|
1月前
NPM——删除已发布的包
NPM——删除已发布的包
45 1
|
2月前
|
运维 Kubernetes Java
阿里云云效操作报错合集之npm包已经发布到了制品仓库,但流水线中拉取依赖时出现404错误,该如何排查
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
阿里云云效操作报错合集之npm包已经发布到了制品仓库,但流水线中拉取依赖时出现404错误,该如何排查
|
2月前
|
前端开发 容器
前端框架与库 - Angular模块与依赖注入
【7月更文挑战第17天】探索Angular的模块化和依赖注入:模块用于组织组件、服务等,通过`@NgModule`声明。依赖注入简化类间依赖管理,但面临模块重复导入、服务作用域不当和依赖循环等问题。解决策略包括规划模块结构、正确设置服务作用域和使用工厂函数打破循环依赖。遵循最佳实践,构建高效、可维护的Angular应用。
54 17
|
1月前
|
JavaScript 前端开发 开发者
从零到一:教你如何发布自己的npm插件包
从零到一:教你如何发布自己的npm插件包
|
1月前
|
JavaScript
GitHub——自动发布NPM包
GitHub——自动发布NPM包
12 0
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
从0到1开发一个自己的npm包完整过程
创建自己的 npm 包涉及六个步骤:1) 注册 npm 账号;2) 使用 `npm init` 初始化项目,确保 package.json 的 name 唯一且 private 为 false;3) 开发项目,可封装 UI 组件、函数库或命令行工具;4) 本地调试,通过 `npm link` 在项目中测试;5) `npm login` 登录账号,可能需切换至官方仓库;6) 使用 `npm publish` 发布项目。注意版本号递增,无意义的包不建议发布。
164 2
从0到1开发一个自己的npm包完整过程
|
4月前
|
JSON 小程序 前端开发
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
微信小程序按需引入 vant 组件,自动清除项目中未使用的 vant 组件,减少代码包大小,避免因未使用到的 vant 组件触发隐私协议提交审核时被拒
67 1
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
|
2月前
|
JavaScript 测试技术
npm发布自己的插件包
npm发布自己的插件包
|
2月前
|
JavaScript 开发工具 数据安全/隐私保护
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)
64 0
|
2月前
包管理工具——npm实用教程 (修改下载源,安装依赖 -D -S -g ,卸载依赖等)
包管理工具——npm实用教程 (修改下载源,安装依赖 -D -S -g ,卸载依赖等)
44 0

推荐镜像

更多