前端大基建

“基建”，就是研發團隊的技識訓礎設施建設，是一個團隊通用技術能力的沉淀，是一個團隊未來的保證，網上看到的一句話，說的很好，“業務支撐是活在當下，技識訓建是活好未來”，

原始碼和更多案例放在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 完成了，