如何在webpack中获取git版本和当前脚本的工作目录

仅针对vue项目,当然你如果能看懂也可以继续。

前言

前一阵子因为vue部署不上去错误没有解决,一直找不到原因,后来一看部署的git版本有问题,于是决定在页面中显示git版本。
要显示git版本,首先要知道它存在什么地方?这就导致我们需要知道git的目录中的信息,知道了信息我们怎么把它拿出来这也是个问题?。

准备工作

.git目录与git了解

当你创建一个仓库的时候,使用 git init 指令, git 将会创建一个神奇的目录:.git。这个目录下包含了所有 git 正常工作所需要的信息。

这里就是第一次提交之前 .git 目录的文件结构:

├── HEAD:这个文件包含了一个档期分支(branch)的引用,通过这个文件Git可以得到下一次commit的parent
├── branches
├── config:这个是GIt仓库的配置文件
├── description:仓库的描述信息,主要给gitweb等git托管系统使用
├── hooks:这个目录存放一些shell脚本,可以设置特定的git命令后触发相应的脚本;在搭建gitweb系统或其他git托管系统会经常用到hook script
│ ├── pre-commit.sample
│ ├── pre-push.sample
│ └── ...
├── info:包含仓库的一些信息
│ └── exclude
├── objects:所有的Git对象都会存放在这个目录中,对象的SHA1哈希值的前两位是文件夹名称,后38位作为对象文件名
│ ├── info
│ └── pack
└── refs:这个目录一般包括三个子文件夹,heads、remotes和tags,heads中的文件标识了项目中的各个分支指向的当前commit
├── heads
└── tags

这个文件包含你仓库的设置信息。例如这里会放你远程仓库的 URL,你的 email 地址,你的用户名等…。 每次你在控制台使用“git config…”指令时,修改的就是这里。

这里不对.git的文件进行详细说明了,直接说明是那个文件,这里给大家推荐几个.git目录详解的教程:

git指南:GitBook
探索 .git 目录,让你真正了理解git
Git HEAD 意思详解 和版本回退
GitBook, Git + Markdown 快速发布你的书籍

首先,Git必须知道当前版本是哪个版本,在Git中,用HEAD表示当前分支版本的路径指向,也就是最新的提交。这里我们需要用到git根目录下的HEAD,我们打开它,他里面有这样一句话:

ref: refs/heads/这里是你的分支名字

如果你只有master分支或者你通过git checkout 分支切换到master上,就是ref: refs/heads/master。

比如题主目前有两个分支

我的分支查看

在develop分支时,HEAD的内容是ref: refs/heads/develop,在master分支时HEAD的内容是ref: refs/heads/master

我们根据HEAD指向的目录信息可以看到如下内容

HEAD指向的目录信息

这里说明题主是develop分支(如果你们没有develop分支,请打开你们自己的当前分支版本的路径指向),所以我们打开develop,它的内容就是当前git版本b1b8d7b1f29d40b68c16b2f524d8655ae99faeae(注意我的提交ID和你的肯定不一样)

node读取文件

因为我们是基于webpack的git版本获取,而webpack是基于node的,因为是基于vue的前端,我们没有办法在src底下的前端项目中获取src文件之外的东西(如果你这样做了,不过不是static,那是不对的),所以我们只能在src之外的可以使用node的地方,供我们选择的地方不多,只有下面这些:

使用node的地方

我们这里仔细敲定选通过config的底下的项目构建文件dev.env.jsprod.env.js来得到我们需要的信息,即在项目构建时我们获取git版本。

我们需要使用node的fs模块

这里附上node的api:

Node.js 中文文档

webpack构建时使用node获取git版本

默认的dev.env.js是这样的:

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

默认的prod.env.js是这样的:

module.exports = {
  NODE_ENV: '"production"'
}

我们dev.env.js的获取代码如下:(记住题主是develop分支,你们不一定,但是代码是相同的,只是注释换成你们自己的)

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

// 当前脚本的工作目录的路径
var cwd = '"' + process.cwd() + '"' // process-node全局模块用来与当前进程互动,可以通过全局变量process访问,不必使用require命令加载。它是一个EventEmitter对象的实例。process.cwd()表示返回运行当前脚本的工作目录的路径

// 获取git版本
var fs = require("fs")
var gitHEAD = fs.readFileSync('.git/HEAD', 'utf-8').trim() // ref: refs/heads/develop
var ref = gitHEAD.split(': ')[1] // refs/heads/develop
var develop = gitHEAD.split('/')[2] // 环境:develop
var gitVersion = fs.readFileSync('.git/' + ref, 'utf-8').trim() // git版本号,例如:6ceb0ab5059d01fd444cf4e78467cc2dd1184a66
var gitCommitVersion = '"' + develop + ': ' + gitVersion + '"' // 例如dev环境: "develop: 6ceb0ab5059d01fd444cf4e78467cc2dd1184a66"
module.exports = merge(prodEnv, {
  CURRENT_WORK_DIR: cwd, // 当前脚本的工作目录的路径
  GIT_COMMIT_VERSION: gitCommitVersion, // 获取git版本
  NODE_ENV: '"development"'
}

注意:上面代码的'"'东西不能换成',具体原因自行百度。

可是我们dev.env.js只是开发环境,我们需要在正式环境上也显示,很简单,复制一份放到prod.env.js中:

// 当前脚本的工作目录的路径
var cwd = '"' + process.cwd() + '"' // process-node全局模块用来与当前进程互动,可以通过全局变量process访问,不必使用require命令加载。它是一个EventEmitter对象的实例。process.cwd()表示返回运行当前脚本的工作目录的路径

// 获取git版本
var fs = require("fs")
var gitHEAD = fs.readFileSync('.git/HEAD', 'utf-8').trim() // ref: refs/heads/develop
var ref = gitHEAD.split(': ')[1] // refs/heads/develop
var develop = gitHEAD.split('/')[2] // 环境:develop
var gitVersion = fs.readFileSync('.git/' + ref, 'utf-8').trim() // git版本号,例如:6ceb0ab5059d01fd444cf4e78467cc2dd1184a66
var gitCommitVersion = '"' + develop + ': ' + gitVersion + '"' // 例如dev环境: "develop: 6ceb0ab5059d01fd444cf4e78467cc2dd1184a66"
module.exports = merge(prodEnv, {
  CURRENT_WORK_DIR: cwd, // 当前脚本的工作目录的路径
  GIT_COMMIT_VERSION: gitCommitVersion, // 获取git版本
  NODE_ENV: '"production"'
}

然后我们就可以在别的地方,拿到这些值:例如main.js中

console.log(process.env.CURRENT_WORK_DIR)
console.log(process.env.GIT_COMMIT_VERSION)

结语

到此我们可以得到git版本还有当前脚本的工作目录的路径。

提示:后面还有精彩敬请期待,请大家关注我的专题:web前端。如有意见可以进行评论,每一条评论我都会认真对待。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339

推荐阅读更多精彩内容

  • git常用命令 GIT常用命令备忘:http://stormzhang.com/git/2014/01/27/gi...
    新篇章阅读 8,438评论 1 26
  • 今天有个人说我你朋友圈才两条朋友圈,真对不起朋友圈。 我说朋友圈是发给想发的人看的。他看到了。任务就完成了。 同理...
    醉生不梦死阅读 149评论 0 0
  • 知乎问题,没有互联网的年代,人们是如何查资料的? 我在2014-12-29 发现这个问题。当时我大概已经知道了一个...
    Cyberpunk阅读 897评论 0 1
  • Idea ctrl+e 最近打开的文件shift+click 关闭文件alt + q 查看方法声明ctrl+alt...
    zsj0310阅读 374评论 0 0
  • 江城子 - 杏花歌 笙歌夺色春意深, 夜玲珑, 月近人。 点点花阴, 莳香润瑶琴。 花前斗酒第一尊, 谁为我, 醉...
    钱塘小泥鳅阅读 235评论 0 1