前端大基建

“基建”，就是研发团队的技术基础设施建设，是一个团队通用技术能力的沉淀，是一个团队未来的保证。网上看到的一句话，说的很好，“业务支撑是活在当下，技术基建是活好未来”。

源码和更多案例放在github上面，欢迎star.

---

前端基建链路层

基建的内容和业务阶段团队既有建设的沉淀是分不开的，所以基建就是从最基础的部分开始搞，怎么样能规范流程，方便开发，方便维护，怎样 能更加优雅的扩展业务，就怎么去搞基建。

接下来我们以“基建链路层”来搭建基建系统，下面是我所整理的基建链路层：

组件体系

组件体系有两种，一种是完全自己建立，根据设计的ui样式，来创建。另一种是根据网上的组件项目来进行二次封装。

这里我们主要用二次封装，因为自己团队去开发一个完整的组件系统，太费人力物力了，而且技术更新换代很快，不如直接拿github上成熟的项目进行封装成自己想要的样子，还能培养阅读源码能力。0.0

这个组件体系的源码地址在源码地址

第一步:

vue create k-components 通过vue-cli创建一个基础项目。

第二步:

根目录创建packages文件夹，用来存放组件内容。并且创建k-submit文件夹（这里我们创建一个提交框组件为案例，并且里面引用了element-ui的两个组件）。 文件结构是这样的：

这里我们创建一个购物车的提交栏组件（里面含有element-input-number,elemnt-btn两个组件）

// packages/k-submit/src/index.vue <template> <div class="submit"> <el-input-number class="submit-number" v-model="num" :min="min" :max="max" label="描述文字"></el-input-number> <el-button class="submit-btn" @click="hanldeSubmit">提交</el-button> </div> </template> <script> import { InputNumber, Button} from 'element-ui' import Vue from 'vue' Vue.use(InputNumber) Vue.use(Button) export default { name:"KSubmit", data() { return { }; }, props:['min','max','num'], methods: { hanldeSubmit(){ this.$emit('submit',{current:this.num}) } } }; </script> <style scoped> .submit{ width: 300px; border: 1px solid #e9e9e9; display: inline-block; border-radius: 4px; } .submit-number{ float: left; width: 150px; } .submit-btn{ float: right; width: 100px; } </style>

组件代码完成之后 我们需要暴露出来这个组件，所以在外面会有一个index.js来暴露出去该组件：

// packages/k-submit/index.js import KSubmit from './src/index.vue' KSubmit.install = (Vue)=>{ Vue.component(KSubmit.name, KSubmit) } export default KSubmit

组件相关的代码（k-submit）完成之后，我们需要一个webpack打包的入口文件。里面应该包括一个全局的install方法，这样就可以被全局引入use，还应该包括每个组件的单独方法，这里可以支持按需引入use。

// packages/index.js import KSubmit from "./k-submit/index" import 'element-ui/lib/theme-chalk/index.css'; const components = [ KSubmit ] const install = function(Vue) { components.forEach(component => { Vue.component(component.name, component); }); } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue); } export default { install, KSubmit } export { KSubmit }

第三步：

配置打包文件和命令：

这里项目用的Webpack3.0，所以在根目录添加一个vue.config.js配置文件，里面包括了一个plugin（CopyWebpackPlugin）主要是为了把packages文件夹在打包的时候copy到咱们的出口文件夹（lib）里面，为了可以清楚地在包里面看到组件代码，方便阅读源码。

//vue.config.js const webpack = require( 'webpack' ) const CopyWebpackPlugin = require( 'copy-webpack-plugin' ) const path = require('path') module.exports = { configureWebpack: { plugins: [ new webpack.DefinePlugin( { 'process.env': { NODE_ENV: '"production"' } } ), new webpack.LoaderOptionsPlugin( { minimize: true } ), new CopyWebpackPlugin( [ { from: path.resolve(__dirname, './packages' ), to: path.resolve(__dirname, './lib/src' ), ignore: [ '.*' ] } ] ), ] } }

同时由于是webpack3.0我们需要修改package.json文件，添加项目名称、版本号、打包命令和npm包入口配置。

项目名称："name": "k-components" 注意有没有和网上包重名

版本号："version": "0.1.0" 注意每次publish包，版本号都要更新。否则push不上去。

打包命令："scripts": {"build:lib":"vue-cli-service build --target lib --name k-ui --dest lib ./packages/index.js" },

入口配置："main":"./lib/k-ui.common.js", 此属性定义了当我们引用依赖时的文件地址。 平时开发中基本用不到，只有我们在引用或者开发某个依赖包的时候才派上用场,不使用main属性的话我们可能需要这样写引用：require(“k-components/lib/k-ui.common.js”)，如果我们在main属性中指定了dist/app.js的话，我们就可以直接引用依赖就可以了：require(“k-components”)

第四步：

上传npm包。

首先我们创建一个npm的账号npm官网npm login 输入你的账号密码邮箱然后登陆成功后 npm publish 推送

然后我们就可以通过：

npm install k-components 来安装组件包了。

最终我们引入组件k-sumbit之后展现如下：

---

CI/CD云端构建发布

GitLab CI/CD 是一个内置在GitLab中的工具，用于通过持续方法进行软件开发：

Continuous Integration (CI) 持续集成Continuous Delivery (CD) 持续交付Continuous Deployment (CD) 持续部署

软件开发的持续方法基于自动执行脚本，以最大程度地减少在开发应用程序时引入错误的机会。从开发新代码到部署新代码，他们几乎不需要人工干预，甚至根本不需要干预。

GitLab CI/CD 是如何工作的？

使用GitLab CI/CD，你需要一个托管在GitLab上的应用程序代码库，并且在根目录中的.gitlab-ci.yml文件中指定构建、测试和部署的脚本。

一旦你已经添加了.gitlab-ci.yml到仓库中，GitLab将检测到该文件，并使用名为GitLab Runner的工具运行你的脚本。

.gitlab-ci.yml文件告诉GitLab Runner要做什么。一个简单的管道通常包括三个阶段（Stage）：build、test、deploy

GitLab CI/CD 是通过 GitLab Runner 来执行的

GitLab CI/CD 将按照 Stage 定义的顺序来执行，任何一个 Stage 失败，整个 CI/CD 将失败

每一个 Stage 可以被若干个 Job 关联。Stage 在执行的时候，关联到这个 Stage 的所有 Job 都将被执行，不过不同的 Job 可能是并行执行的。

每个 Job 在执行的时候，会先按照缓存策略加载缓存数据，然后按照顺序依次运行

ps: 这里解释下webhook 和gitlab-runner的差别，webhook方式是我们主动配置了一个连接给gitlab；gitlab-runner只要注册一下就好了

GitLab CI/CD 工作流程

当我们写好代码之后通过git push到gitlab仓库，然后gitlab根据代码中的.gitlab-ci.yml文件的要求触发了gitlab-runner的操作，gitlab-runner帮我们测试代码，打包，全部通过之后，推送到代码仓库，然后通知生产服务器拉取最新代码。

安装gitlab

所需配置：

centos 服务器 至少2g内存不然会卡

gitlab 安装：

yum install -y git 安装git yum install -y http://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gitlab-ce-12.5.6-ce.0.el7.x86_64.rpm rpm -i gitlab-ce-12.5.6-ce.0.el7.x86_64.rpm ps:如果出现安装失败，提示：policycoreutils-python is needed by gitlab-ce-12.5.6-ce.0.el7.x86_64.rpm yum install policycoreutils-python // 然后修改配置文件 vim /etc/gitlab/gitlab.rb `external_url`后面的链接改为`http://localhost`

重置并启动GitLab

执行：

gitlab-ctl reconfigure

gitlab-ctl restart

然后访问 ip就可以了，默认安装在80端口，如果需要换端口，参考文章https://cloud.tencent.com/developer/article/1139779`，这里有详细的修改教程，亲测过了~。

安装gitlab-runner

GitLab Runner 安装：

curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh | sudo bash // 添加runner官方库 sudo yum install -y gitlab-ci-multi-runner

GitLab Runner 注册：

首先要先获取gitlab-ci的Token:

输入：gitlab-runner register

1.Please enter the gitlab-ci coordinator URL (输入入Gitlab CI地址): 图片中的url 2.Please enter the gitlab-ci token for this runner(输入项目CI token): 登录刚刚安装的gitlab，gitlab->setting->OverView->runner 可以看到token ，图片中的token

3.Please enter the gitlab-ci description for this runner(输入 Runner 描述):

4.Please enter the gitlab-ci tags for this runner (comma separated)(输入 Runner 标签，可以多个，用逗号隔开): 这里的tag，是为了识别不同的runner。这里tag配置一下，以后会用到

5.Please enter the executor: shell, ssh, virtualbox, docker+machine, kubernetes, custom, docker, parallels, docker-ssh, docker-ssh+machine(输入 Runner 执行的语言): shell 选择执行器，这里选shell

配置完之后 OverView->runner下面可以看到刚刚注册过的runner，这样一个runner就注册成功了。

下面我们需要的是新建一个项目，同时配置yml文件。

以vue-cli创建的项目为例子，写一个.yml文件

stages: # 定义的两个流程，一个是拉依赖，一个是打包 - install_deps - build cache: # 缓存 paths: # 缓存node_mudules将大大提高ci运行的速度 - node_modules/ - dist/ job_install_deps: # 定义一个安装依赖job stage: install_deps # 匹配使用哪个tag的runner(注册时填写的) tags: - help-man only: - develop - master script: - npm install job_build: # 必须定义一个名为 job_build 的 job stage: build tags: - help-man script: - npm ci - npm run build only: - develop - master

然后我们push到gitlab仓库 ，点开该项目的CI/CD，就可以看到GitLab CI/CD开始工作了。

同时我们还能在job里面看到它的终端运行情况（和本地终端的显示一样）。

好了，这里 一个完整的GitLab CI/CD 完成了。