webpack+git开发环境将git中tag自动显示到web中

问题由来: 系统一般是要显示版本信息的,可是,这以前作的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