一个构建plugin插件，在 build 的时候自动在 index.html 中插入当前构建 git HEAD 节点的相关信息，以供排查构建版本

install

1npm i git-info-build-plugin -D

引入

1import { vitePluginGitInfoInject } from 'git-info-build-plugin';
2// or
3
4const { WebpackPluginGitInfoInject } = require('git-info-build-plugin');
5// const { WebpackPluginGitInfoInject3 } = require('git-info-build-plugin');

• WebpackPluginGitInfoInject webpack 4/5+ 构建环境引入

• Webpack3PluginGitInfoInject webpack 3- 构建环境引入

• vitePluginGitInfoInject vite 构建环境引入

• options

1  {
2    "hash": true,
3    "time": true,
4    "branch": true,
5    "tag": true,
6    "console": true,
7    "htmlFile": "index.html",
8    "globalVarName": "__PROJECT_VERSION_INFO__",
9
10    "outFile": "", // _version.txt 默认不输出
11    "buildTime": true,
12  }

在插入的信息中是否需要的相关信息：

• hash 提交节点的hash串

• time 提交节点的时间

• branch 分支信息，如果有

• tag HEAD 节点上有的tag信息

• htmlFile 插入的html文件信息

• globalVarName 插件html中的全局变量名,可为空

• console 是否控制台输出

• outFile 在build dist文件夹中输入一个文件，为空则不输出

• buildTime 构建时间点

示例

1// vite.config.js
2import vue2 from '@vitejs/plugin-vue2';
3import { vitePluginGitInfoInject } from 'git-info-build-plugin';
4
5export default defineConfig({
6  base: './',
7  plugins: [
8    vue2(),
9    vitePluginGitInfoInject(options),
10  ],
11})

1// vue.config.js / webpack.config.js
2const { WebpackPluginGitInfoInject, /* Webpack3PluginGitInfoInject */ } = require('git-info-build-plugin');
3
4module.exports = {
5  // ...
6  configureWebpack: (config) => {
7    config.plugins.push(...[new WebpackPluginGitInfoInject(options)]);
8  },

默认输出

• console 控制台 输出日志

[git-info] {
    "commitHash": "xxxxxxxxxxxxxxxxxxxx",
    "commitTime": "2024-08-15 14:50:13",
    "gitBranch": "xxx-xxx",
    "gitTag": "xx-xx",
    "buildTime": "2024/8/15 5:34:30"
}

• html文件新增脚本

<script>window.__PROJECT_VERSION_INFO__ = {"commitHash":"xxxxxxxxxxxxxxxxxxxx","commitTime":"2024-08-15 14:50:13","gitBranch":"xxx-xxx","gitTag":"xx-xx"};console.info("[git-info] ", window.__PROJECT_VERSION_INFO__);</script>

• 带有 outFile 则会在对应dist文件夹内新建一个 文件内容，内容和上述一致