【angular-实践】npm配合gitlab管理项目依赖库

readme

在gitlab上创建两个项目

• simple-ui UI组件库 。用来开发组件库
• simple-ui-builds 依赖库。用来发布组件库，即相当于npm私有库的作用，省去搭建npm私有库的流程

步骤

1 准备组件库

• 创建项目
  项目名为sim-simple, 创建出来的文件夹名称是--directory=simple-ui指定的simple-ui

ng new sim-simple --directory=simple-ui

• 创建依赖库

ng g library simple-ui --prefix=sim

• 打包编译
  将生成一个dist/simple-ui文件

 ng build simple-ui

• 发布到simple-ui-builds中
  将上一步打包生成的dist/simple-ui下的内容拷贝到simple-ui-builds中，然后push到gitlab上

2 使用组件库

跟上传到npm私有库的使用方式类似，不同在于引入的方式

• 引入组件库

npm install --save git+http://xxxx/simple-ui-builds.git

引入成功后package.json中会出现

• 在组件中导入并使用
  src\app\app.module.ts

import { SimpleUiModule } from 'simple-ui';

@NgModule({
  ...
  imports: [
    SimpleUiModule
  ],
  ...
})

src\app\app.component.html

 <sim-simple-ui></sim-simple-ui>

参考

• 使用Angular-cli多工程配合做gitlab私有仓库（主要参考）
• 基于gitlab创建npm私有库
• npm 直接从 Git 仓库安装 模块/私有模块
• angular 官方的表单模块：
  • 源码 https://github.com/angular/angular/tree/master/packages/forms
  • 发布 https://github.com/angular/forms-builds