問題由來: 系統(tǒng)通常是要顯示版本信息的,但是,這之前做的web都是手動打tag,并手動將web中的version版本更新,
如果能將git中的tag版本信息自動添加到web中那是不是很贊?
有了這個想法自然就要探索一下實現(xiàn)方法了,
翻看了一下.git的文件目錄,發(fā)現(xiàn)里面有個.git\refs\tags目錄,這里面正是要找的tag信息,

v1.0
v1.1
v1.2

每個文件里面記錄著commit 標識,也就是該tag是在哪個節(jié)點上的,這里我們暫時不用處理那么深入(也許這個功能在別的地方能用到).
那我們就可以獲取這些文件名稱,然后再進行遍歷得到tag編碼最大的那個就好了,(通常tag都是逐漸增大的).
因為用到了webpack,自然在開發(fā)和打包的就有node環(huán)境,獲取這些文件就需要用node方法,讀取文件列表的方法用到了fs模塊,看代碼

var fs = require("fs");
var path="./.git/refs/tags"; // 相對路徑
var files = fs.readdirSync(path); // 同步版本的readdir , 
console.log(files)

獲取列表的代碼已經(jīng)給出來了,但是應該放到什么位置呢?
在本地開發(fā)的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目錄是代碼路徑,環(huán)境不不是node環(huán)境,所以就不能放到這里面,外面還有build文件夾,這里面就是node環(huán)境了,(如果你分析過webpack的配置,就不會對這里陌生),自然要將上面的代碼放到這里面,觀察了一下內容,發(fā)現(xiàn)應該放到config配置里面最好,當然你也可以放到別的地方,在config文件夾下新建tag.js,配置里面的內容如下

var fs = require("fs")
var merge = require('webpack-merge')
var currentTag = '';
var files = fs.readdirSync('./.git/refs/tags')

currentTag = Math.max(...files.map(p => parseFloat(p.replace(/v/ig, ''))))
if (currentTag > 0) {
  currentTag = '"' + currentTag + '"';
}
module.exports = {
  WEB_TAG: currentTag
}

獲取到最大的tag后導出一個對象出去即可,注意這里面獲取tag時我只取了小數(shù),如果像 v1.2.3這樣的會自動變成1.2,當然想實現(xiàn)其他方法自己實現(xiàn)一下就可以了.
導出去之后就需要使用了,導入到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中還不能獲取到該變量,我們在開發(fā)中經(jīng)常會用到process這個變量,例如獲取rocess.env.NODE_ENV變量進行dev和prodution環(huán)境切換就需要判斷rocess.env.NODE_ENV === 'production'這個, 看到這我們自然也想用該方法去獲取tag就好了,此時嘗試獲取時并不能得到我們的tag值,因為我們沒在webpack中定義該變量.
在build文件夾下有兩個文件webpack.dev.conf.js和webpack.prod.conf.js,里面定義了該環(huán)境下的變量,將tag變量也進行定義就可以了,

new webpack.DefinePlugin({
   'process.env': config.dev.env,
   'process.tag': config.dev.tag
}),

ok,此時重新運行webpack后發(fā)現(xiàn)我們子src的config.js文件下已經(jīng)可以像訪問process.env一樣訪問process.tag了,至于顯示到web頁面中或用于其他邏輯就看自己實現(xiàn)了.
這樣每次tag更新發(fā)布自動帶上了我們的tag,好高興啊.

我是wwmin,有問題可以一起討論,郵箱wwei.min@163.com