前端大基建
“基建”，就是研發團隊的技識訓礎設施建設，是一個團隊通用技術能力的沉淀，是一個團隊未來的保證，網上看到的一句話，說的很好，“業務支撐是活在當下，技識訓建是活好未來”，
原始碼和更多案例放在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 完成了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/187449.html
標籤：其他
上一篇：如何每天白嫖8次騰訊抽獎