問題由來: 系統通常是要顯示版本資訊的,但是,這之前做的web都是手動打tag,並手動將web中的version版本更新,
如果能將git中的tag版本資訊自動新增到web中那是不是很贊?
有了這個想法自然就要探索一下實現方法了,
翻看了一下.git的檔案目錄,發現裡面有個.git\refs\tags
目錄,這裡面正是要找的tag資訊,
v1.0
v1.1
v1.2
複製程式碼
每個檔案裡面記錄著commit 標識,也就是該tag是在哪個節點上的,這裡我們暫時不用處理那麼深入(也許這個功能在別的地方能用到). 那我們就可以獲取這些檔名稱,然後再進行遍歷得到tag編碼最大的那個就好了,(通常tag都是逐漸增大的). 因為用到了webpack,自然在開發和打包的就有node環境,獲取這些檔案就需要用node方法,讀取檔案列表的方法用到了fs模組,看程式碼
var fs = require("fs");
var path="./.git/refs/tags"; // 相對路徑
var files = fs.readdirSync(path); // 同步版本的readdir ,
console.log(files)
複製程式碼
獲取列表的程式碼已經給出來了,但是應該放到什麼位置呢? 在本地開發的vue專案中結構如下(react類似),
+---build
│ build.js
│ check-versions.js
│ dev-client.js
│ dev-server.js
│ utils.js
│ vue-loader.conf.js
│ webpack.base.conf.js
│ webpack.dev.conf.js
│ webpack.prod.conf.js
+---config
│ dev.env.js
│ index.js
│ prod.env.js
+---dist
+---src
| +---assets
| | +---css
| | +---images
| | \---style
| +---components
| | +---BackToTop
| | +---ImageCropper
| | \---layout
| +---directive
| +---pages
| | +---error
| | +---home
| | +---login
| | \---webrtc
| \---service
| +---api
複製程式碼
src目錄和static目錄是程式碼路徑,環境不不是node環境,所以就不能放到這裡面,外面還有build資料夾,這裡面就是node環境了,(如果你分析過webpack的配置,就不會對這裡陌生),自然要將上面的程式碼放到這裡面,觀察了一下內容,發現應該放到config配置裡面最好,當然你也可以放到別的地方,在config資料夾下新建tag.js,配置裡面的內容如下
var fs = require("fs")
var merge = require('webpack-merge')
var files = fs.readdirSync('./.git/refs/tags')
var currentTag = Math.max(...files.map(p => parseFloat(p.replace(/v/ig, ''))))
if (currentTag > 0) {
currentTag = '"' + currentTag + '"';
} else {
currentTag = '""';
}
module.exports = {
WEB_TAG: currentTag
}
複製程式碼
獲取到最大的tag後匯出一個物件出去即可,注意這裡面獲取tag時我只取了小數,如果像 v1.2.3
這樣的會自動變成1.2
,當然想實現其他方法自己實現一下就可以了.
匯出去之後就需要使用了,匯入到config下index.js中使用了
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
build: {
tag: require('./tag'), //引入tag變數
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: false,
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
tag: require('./tag'),//引入tag變數
env: require('./dev.env'),
port: 8000,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'https://www.****.com/, // 介面域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '' //需要rewrite重寫的,
}
}
},
cssSourceMap: false
}
}
複製程式碼
此時在src下的js中還不能獲取到該變數,我們在開發中經常會用到process這個變數,例如獲取rocess.env.NODE_ENV
變數進行dev和prodution環境切換就需要判斷rocess.env.NODE_ENV === 'production'
這個, 看到這我們自然也想用該方法去獲取tag就好了,此時嘗試獲取時並不能得到我們的tag值,因為我們沒在webpack中定義該變數.
在build資料夾下有兩個檔案webpack.dev.conf.js
和webpack.prod.conf.js
,裡面定義了該環境下的變數,將tag變數也進行定義就可以了,
new webpack.DefinePlugin({
'process.env': config.dev.env,
'process.tag': config.dev.tag
}),
複製程式碼
ok,此時重新執行webpack後發現我們子src的config.js檔案下已經可以像訪問process.env
一樣訪問process.tag
了,至於顯示到web頁面中或用於其他邏輯就看自己實現了.
這樣每次tag更新發布自動帶上了我們的tag,好高興啊.
我是wwmin,有問題可以一起討論,郵箱wwei.min@163.com