添加 git 信息到 Vite 生成的 HTML 中

为了明确当前页面的版本情况, 可以将当前项目最新的 git 信息写入到 HTML 中

安装 zx

zx: A tool for writing better scripts

# with pnpm
pnpm add zx -D
# or with other if you prefer
npm install zx -D
yarn add zx -D

写一个 Vite Plugin

// vite.config.js
import { defineConfig, loadEnv } from 'vite'

export default defineConfig({
  // ...
  plugins: [
    // ...
    {
      name: 'vite-plugin-html-git-sha',
      transformIndexHtml(html) {
        return new Promise((resolve) => {
          import('zx/core').then(async (zx) => {
            const version = (await zx.$`git rev-parse --short HEAD`).stdout.trim()
            resolve([
              {
                tag: 'meta',
                injectTo: 'head',
                attrs: {
                  name: 'git:version',
                  content: version,
                },
              },
            ])
          })
        })
      },
    }
  ]
})