如何使用Vite在环境变量中插入git信息？

Question

使用Vite捆绑器时如何从 git 获取有关当前分支、提交日期等信息？

Answer 1

启动Vite时可以使用execSync并检索git信息。
vite.config.ts：

export default ({ mode }: ConfigEnv) => {
   const dev = mode === 'development';

   const commitDate = execSync('git log -1 --format=%cI').toString().trimEnd();
   const branchName = execSync('git rev-parse --abbrev-ref HEAD').toString().trimEnd();
   const commitHash = execSync('git rev-parse HEAD').toString().trimEnd();
   const lastCommitMessage = execSync('git show -s --format=%s').toString().trimEnd();

   process.env.VITE_GIT_COMMIT_DATE = commitDate;
   process.env.VITE_GIT_BRANCH_NAME = branchName;
   process.env.VITE_GIT_COMMIT_HASH = commitHash;
   process.env.VITE_GIT_LAST_COMMIT_MESSAGE = lastCommitMessage;
...

注意：在变量中使用VITE_前缀很重要，否则它们将不可用。

使用示例：

function BuildInfo() {
   const date = new Date(import.meta.env.VITE_GIT_COMMIT_DATE);
   return (
      <div>
         <span>{date.toLocaleString()}</span>
         <span>{import.meta.env.VITE_GIT_LAST_COMMIT_MESSAGE}</span>
         <span>{import.meta.env.VITE_GIT_BRANCH_NAME}/{import.meta.env.VITE_GIT_COMMIT_HASH}</span>
      </div>
   );
}

UPD：您还可以使用https://www.npmjs.com/package/git-rev-sync来获取 git 信息。