webpack+git开发环境将git中tag自动显示到web中
栏目: JavaScript · 发布时间: 6年前
内容简介:问题由来: 系统通常是要显示版本信息的,但是,这之前做的web都是手动打tag,并手动将web中的version版本更新, 如果能将git中的tag版本信息自动添加到web中那是不是很赞? 有了这个想法自然就要探索一下实现方法了, 翻看了一下.git的文件目录,发现里面有个每个文件里面记录着commit 标识,也就是该tag是在哪个节点上的,这里我们暂时不用处理那么深入(也许这个功能在别的地方能用到). 那我们就可以获取这些文件名称,然后再进行遍历得到tag编码最大的那个就好了,(通常tag都是逐渐增大的
问题由来: 系统通常是要显示版本信息的,但是,这之前做的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
以上所述就是小编给大家介绍的《webpack+git开发环境将git中tag自动显示到web中》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 超大7k高清显示器显示网页解决方案
- Web 富文本编辑器 Neditor 2.1.13 发布,修复字体显示区显示“none” 的问题
- 树莓派显示天气信息
- 如何显示随机信息?
- iOS图像显示原理
- Toast 不显示了?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Software Design 中文版 01
[日] 技术评论社 / 人民邮电出版社 / 2014-3 / 39.00
《Software Design》是日本主流的计算机技术读物,旨在帮助程序员更实时、深入地了解前沿技术,扩大视野,提升技能。内容涵盖多平台软件开发技巧、云技术应用、大数据分析、网络通信技术、深度互联时代下的移动开发、虚拟化、人工智能等最前沿实践性讲解。以人脑思维模式,激发计算机操控的无限可能;以软件开发技巧,挖掘系统与硬件的最大价值。 《Software Design 中文版 01》的主题为......一起来看看 《Software Design 中文版 01》 这本书的介绍吧!