我踩坑了：线上跑的到底是哪一版代码？
测试说我给的包有问题，还开会批斗我。我写了个插件，下次他们再说有问题，我直接拿出证据——这次是测试搞错了。
故事要从一次甩锅说起
去年有段时间，我们有个项目打给客户内网部署。
客户那边反馈说「有个功能不对」，售前拉了个群，问我们：现在他们内网跑的前端，到底是哪一版？
我懵了。
我能想到的只有：查 Jenkins 构建时间、看发版记录、让运维对一下包名……
但客户环境我们进不去，他们也不会给你看构建日志。
最后只能靠「大概是上周三那版」「你让那边清个缓存再试试」这种话术硬撑，沟通成本高到离谱，而且心里根本没底。
更绝的是后来有一次：测试同学部署错了包（把旧的打上去了），然后报 bug 说「前端有问题」。
我查了半天代码，逻辑没问题，就跟测试说：会不会是部署的包不对？
测试一口咬定：就是你给的包有问题。
我反复确认过发版记录、构建时间、包名，自己这边真的没弄错，但测试就是不信，坚持说是我的包有问题。
后来还专门开了个会，会上点名说「前端发的包有问题、导致测试环境异常」，我解释了半天「很可能是部署错了包」，没有证据，谁也说不清。
最后只能吃哑巴亏。
从那以后我就想：要是打开页面就能看到「这份代码是谁、什么时候打的」，下次谁再说是我的包有问题，我直接把证据拍桌上。
我试过的笨办法
一开始我试过在代码里手写版本号，比如在 main.js 里加一行：
window.version = 'v1.2.3'; // 每次发版自己改
结果要么忘改，要么改错分支，上线后发现 version 还是上一版的，等于白写。
也试过用 CI 环境变量在构建时注入，但有的项目没有 Jenkins、有的用别的 CI，配置不统一，换一个项目又得搞一遍，心累。
我就想：能不能在 Webpack 打包的时候，自动把 Git 分支、Commit、Tag、打包时间塞进代码里？
这样既不用记着改，也不依赖某一种 CI，只要是从 Git 打的包，就有「身份证」。
所以我自己写了一个插件
查了一圈，没找到特别合胃口的（要么依赖重，要么不能自定义格式），我就自己写了一个 Webpack 插件，名字叫 VersionRecord。
做的事很简单：在打包时自动往你指定的入口文件里插一行代码，把版本信息挂到 window 上。
比如打包完之后，入口里会多出类似这样一行：
window.version = "master-a1b2c3d-v1.0.0-2026-01-15 10:30:00"
- 分支名、Commit、Tag、打包时间都是从本地 Git 和构建时间自动取的，不用手写、不用记。
- 上线以后，任何人打开页面，控制台输入
version就能看到，售前、运维、测试都能自己确认。
接入插件之后，我们项目发版都会带上这段版本信息。
结果没过多久，测试又来找我：「你给的包有问题，功能不对。」
这次我没慌。
我让测试打开他们那边的页面，按 F12，控制台输入 version，把那一串发给我。
我这边一对比：Commit、打包时间、分支，和发版记录完全对得上——说明我给的包没问题，就是他们部署/环境搞错了。
我把截图和发版记录往群里一发：证据在这儿，这次真不是我的包有问题。
测试那边对了一下，确实是他们弄错了。
终于用证据说了一次话，不用再背锅。
我在自己项目里用了一段时间，内网对版本、和测试对「到底上的哪个包」再也没扯过皮，所以就整理了一下开源到 GitHub 了，仓库在这里：mczhaozl/VersionRecord（是我自己的 repo，欢迎 Star / Issue）。
怎么用（如果你也踩过同样的坑）
安装：
npm install version-record --save-dev
在 webpack.config.js 里配一下：
const CreateVersionRecord = require('version-record');
const VersionRecord = CreateVersionRecord({
// 在哪个文件里注入（Vue 一般 main.js，React 可以选入口文件）
isFileAdd: (fileName) => fileName.includes('main'),
// 挂到 window 上的名字
valueKey: 'version',
// 版本串长什么样，自己拼
getString: (branchName, commitId, tag, date) => {
return `${branchName}-${commitId}-${tag}-${date}`;
},
// 哪些环境要注入：true 表示都注入，也可以只写 production
checkEnvironment: true,
});
module.exports = {
plugins: [new VersionRecord()],
};
打包一次，浏览器里输入 version 就能看到。
配置项不多，需要细调的话可以看仓库 README 里的表格（isFileAdd、valueKey、getString、checkEnvironment 都有说明）。
版本信息的来源就是本地 Git + 打包时间，大致是：
| 字段 | 从哪来 | 示例 |
|---|---|---|
| branchName | git branch | master / feature/xxx |
| commitId | git log -1 | a1b2c3d... |
| tag | git tag | v1.0.0 |
| date | 打包时间 | 2026-01-15 10:30:00 |
我自己的体会
- 内网部署：再被问「现在跑的是哪一版」，直接让对方控制台看
version，省无数句话。 - 人员变动：谁改过、改的是哪一版，用 Commit ID 反查 Git 就行，不用猜。
- 测试/环境背锅：谁再说「你给的包有问题」，让他看
version，和发版记录一对——证据说话，不用再开会批斗还说不清。
如果你也遇到过「线上代码对不上号」的坑，可以试试这个插件，零侵入、改一下 Webpack 配置就能用。
仓库地址：github.com/mczhaozl/Ve… ，有问题或想法欢迎提 Issue，少踩坑才是真的。
如果这篇对你有帮助，欢迎点赞、收藏，或者分享给也被版本问题折磨过的同事。
