使用Angular-cli多工程配合做gitlab私有仓库

jiayisheji commented 5 years ago

最近一直研究 Angular-cli 多工程的特性，传送门，随着公司项目越来越复杂度增加，开始考虑模块化拆分问题，这就涉及很多工程配置，模块越多配置越麻烦。因为公司代码都在公司内部搭建的gitlab里面，虽然现在github有私有项目，但是私人对公司项目不是很有好，原因你懂的。

废话就不多说了，赶紧上车吧~~~

准备

gitlab环境你项目的地址，登录进去创建项目。

需要创建2个项目，一个是源码代码项目，一个发布编译后项目。

举个栗子：

我现在要造个轮子，需要创建一个UI组件库，起个简单的名字就叫simple-ui。

那就我在gitlab里面创建一个工程，名字叫simple-ui。

在创建一个编译后的工程，这个是重点，名字叫simple-ui-builds。这个是你项目需要引用的地址

获取 token

登录gitlab
进入你项目 gitlab.com/jiayi/simple-ui-builds/settings/repository
最下面的Deploy Tokens, 点击Expand。
开始创建token

生成token

注意：我画红色框的地方需要注意，这个是很重要的认证，那个小本本把它记录下来，因为你一关闭这个页面或者刷新，这个玩意就没有了。

克隆项目

有些一般克隆项目都是git clone http://gitlab.com/jiayi/simple-ui.git，这样没什么毛病也是正确，但是有个问题是如果你没有设置全局邮箱和用户名，就会让你每次 pull 和 push 操作都提示你输入用户名和密码。这样很烦。

那就这样来克隆地址：git clone http://${username}:${password}@gitlab.com/jiayi/simple-ui.git。

${username} 你的用户名
${password} 你的登录密码

到这里，我们的工作区里面应该有2个git目录了

gitlab
     ---  simple-ui
     ---  simple-ui-builds

开发项目

安装开发必备依赖（nodejs就不必说了）
```
npm i -g @angular/cli
```

生成angular项目，如果你当前在gitlab文件夹里

ng new sim-simple --directory=simple-ui
选择路由，yes
选择css预处理器，scss/sass
等待安装依赖

进入simple-ui文件夹，

   ng start // 开始运行项目。

选择src当我们simple-ui的文档项目界面，也算是测试界面，因为生成的library，就相当于一个js文件，你压根不知道它是样子的。

   ng g library simple-ui --prefix=sim

然后开始尽情玩耍你的UI组件库。

发布编译后的UI库

   ng build simple-ui

这样就好自定义发布到dist/simple-ui，

我们要做最重要的一步，发布到simple-ui-builds里面。

  npm run publish:lib

思考一下我们需要什么哪些操作？

版本日志根据simple-ui提交记录生成CHANGELOG.md文件
把dist/simple-ui文件拷贝到simple-ui-builds里面
修改版本号把package.json里的version+1，这里需要做个配置，不然会一直累加
自动提交本地文件 git add .
自动写提交日志 git commit -m "release: cut the vxx.xx.xx release"
不需要拉代码，没有git pull一说，
自动提交代码并打tag git push --follow-tags origin master

扩展功能：需不需要去通知使用者更新。

这里需要写脚本来支持，我们先放在一边，后面慢慢来说明。

项目使用

我们正常使用npm安装npm上面的包，都是没什么问题，这个比较特殊。

我们需要这样来安装：

npm i --save-dev git+http://${gitlab+deploy-token-username}:${token}@gitlab.com/jiayi/simple-ui-builds

${gitlab+deploy-token-username} 就是前面要你用小本本记录的，Use this username as a login.绿色提示文字输入框里面的内容。
${token} Use this token as a password. Make sure you save it - you won't be able to access it again.红色提示框里面的内容。

这样就把你的依赖安装的你的项目里面，就可以和其他npm包一样的使用了。

自动发布

...待续

iamk123 commented 2 years ago

npm run publish:lib是啥意思呀？请问

jiayisheji commented 2 years ago

npm run publish:lib是啥意思呀？请问

是 npm scripts，它要做的事情就是:

思考一下我们需要什么哪些操作？版本日志根据simple-ui提交记录生成CHANGELOG.md文件把dist/simple-ui文件拷贝到simple-ui-builds里面修改版本号把package.json里的version+1，这里需要做个配置，不然会一直累加自动提交本地文件 git add . 自动写提交日志 git commit -m "release: cut the vxx.xx.xx release" 不需要拉代码，没有git pull一说，自动提交代码并打tag git push --follow-tags origin master 扩展功能：需不需要去通知使用者更新。这里需要写脚本来支持，我们先放在一边，后面慢慢来说明。

iamk123 commented 2 years ago

您好，npm run publish:lib这些我都手动操作了，我想问的是simple-ui-builds是要新建一个angular项目吗？？如果是的话我将simple-ui打包后，应该拷贝到simple-ui-builds哪个地方呢? 如果只是一个文件夹，我拷贝到该目录push到gitlab后，在别的项目中通过npm git+引入会失败，应该是没有package.json导致的
我现在的情况是创建了一个名为simple-ui-builds的angular项目，将simple-ui打包后拷贝到该目录的根目录下，然后push到gitlab中，在别的项目中通过npm git+引入进来了，但不知道该如何使用，不知这样是否操作正确

jiayisheji commented 2 years ago

simple-ui-builds 是一个发布项目，一般对外开发都是发布到npm里面，就没有这个项目，对内如果不想另外搭建私有npm，就需要有个发布项目来存储，我把 simple-ui 编译好了，发布到 simple-ui-builds 项目里，这样就可以公司内部通过 npm git+引入使用了。

simple-ui 组件库
simple-ui-builds 组件发布库
angular-demo 开发库

simple-ui 使用 npm run publish:lib 把打包好的 dist 目录文件拷贝到 simple-ui-builds 里，在 angular-demo 就可以 npm git+ install，这样就和平常使用 npm 包一样了。

给你举几个例子：

angular 官方的表单模块：

我当时也是参考这个命名的。

iamk123 commented 2 years ago

simple-ui-builds 是一个发布项目，一般对外开发都是发布到npm里面，就没有这个项目，对内如果不想另外搭建私有npm，就需要有个发布项目来存储，我把 simple-ui 编译好了，发布到 simple-ui-builds 项目里，这样就可以公司内部通过 npm git+引入使用了。

simple-ui 组件库

simple-ui-builds 组件发布库

angular-demo 开发库

simple-ui 使用 npm run publish:lib 把打包好的 dist 目录文件拷贝到 simple-ui-builds 里，在 angular-demo 就可以 npm git+ install，这样就和平常使用 npm 包一样了。

给你举几个例子：

angular 官方的表单模块：

源码 https://github.com/angular/angular/tree/master/packages/forms

发布 https://github.com/angular/forms-builds

我当时也是参考这个命名的。

非常感谢，已经通了！

jiayisheji / blog