如何使用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 信息。

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

How to insert git info in environment variables using Vite?

javascript

git

version-control

vite