angular项目基于ng-alain和ng-zorro等框架实现开发公共组件并且打包上传成npm包
前言:
公司开发的项目都是angular框架配合ng-alain,ng-zorro等组件一起使用, 我们自己开发了一些公共组件,这些组件时长需要修改bug,扩展功能什么的,而多个项目都在用的时候就有很多个版本需要维护,非常不利于扩展,所以我们打算将这些公共组件开发成npm包上传,使用的项目直接像使用其他框架包一样,这样就只有一个地方需要维护了.
1. 开发公共组件的项目模板/download/qq_41844127/15049699
2.下载之后解压 先运行 yarn install 安装依赖包
3.项目结构:
1) projects下 dev-app 是测试组件用的项目,已经添加了ng-alain,ng-zorro等框架基础组件,可以直接运行,若提示有找不到的组件则需要在 dev-app/src/app/shared/ 下shared-delon.module或者shared-zorro.module中去imports对应的组件
2)projects下my-project-name 就是最终需要打包上传的部分,公共组件开发在其目录下 src/lib/components 下 改项目已经引入了ng-alain,ng-zorro等框架基础组件,若提示有找不到的组件则需要在my-project-name.module中去imports对应的组件
4. 在components下创建组件 ng g c demo
demo组件html部分:
ts部分无特别内容都是默认的
5.在my-project-name.module.ts中exports 组件DemoComponent
@NgModule({declarations: [DemoComponent],imports: [CommonModule,...SHARED_ZORRO_MODULES,...SHARED_DELON_MODULES],/** 需要供使用的就导出 */exports: [DemoComponent]})export class MyProjectNameModule { }
6. 在public-api.ts中导出
export * from './lib/my-project-name.module';export * from './lib/components/demo/ponent';
7.
在测试项目中测试, 打开projects\dev-app\src\app\shared下的shared.module.ts文件 在exports中导出MyProjectNameModule
exports: [CommonModule,FormsModule,ReactiveFormsModule,RouterModule,AlainThemeModule,DelonACLModule,DelonFormModule,TranslateModule,// 导出公共组件模块MyProjectNameModule,...SHARED_DELON_MODULES,...SHARED_ZORRO_MODULES,// third libs...THIRDMODULES,// your components...COMPONENTS,...DIRECTIVES,],
在开发的正式项目也是同理,千万注意不是imports 是exports
8. 只要在shared中导入之后,就可以在任意组件中使用了
9.效果
10. 当然上面使用是在测试项目中,若是给正式开发的项目还需要打包上传
1) 在my-project-name文件下的package.json文件中记得修改版本号
2) 在project目录下 运行命令ng buildmy-project-name --prod 编译, 编译之后会生成一个dist文件
11. 进入 dist/my-project-name 运行命令npm publish 发布,如果没有npm账号 先去注册,然后npm loggin 登录,具体这块流程网上可以查到很多例子
12.目标项目中 yarn addmy-project-name 下载安装包
13. 重复 7.8.9 步骤就好
ps: 菜鸟个人开发心得,大佬路有意见过勿喷,意见可以交流,希望能帮到有需求的朋友.欢迎留言
