「NodeJS」在前端展示构建及Git提交信息 / 白澪

在写项目的时候，白澪想到了之前看到别的项目网页上，有展示提交hash和构建时间。所以自己也想在项目中展示这些信息 φ(゜▽゜*)♪ tips> 这是白澪自己的想法，因为实在也没有找到别人的示范（~~其实也是懒得翻源码~~），就自己做了实现

获取构建和Git信息 ,ԾㅂԾ,

白澪的想法是构建之前通过脚本执行命令并解析获取数据，所以首先要创建一个脚本，白澪一般放在以下的路径 script/generate-build-info.js

首先需要一个执行命令的函数 △□○(´▽｀)

JavaScript

const { execSync } = require('child_process');

/**
 * 安全执行命令，避免出错时直接崩溃
 * @param {string} command - 命令
 * @param {string} fallback - 出错时的默认返回值
 * @returns {string} 命令执行结果或默认值
 */
function exec(command, fallback = 'unknown') {
  try {
    return execSync(command).toString().trim()
  } catch (error) {
    console.warn(`Shell Command Failed: ${command}`, error.message)
    return fallback
  }
}

其次使用命令构建包含所需信息的对象 (☆▽☆) 下面是一个小示范

JavaScript

const buildInfo = {
  version: projectInfo.version, // 这里的projectInfo是通过path模块打开package.json文件获取数据
  hash: exec('git rev-parse --short HEAD'),
  hashFull: exec('git rev-parse HEAD'),
  summary: exec('git log -1 --pretty=%s'),  // 只获取摘要
  
  buildDate: new Date().toISOString(),
  buildTimestamp: Date.now(),
  nodeVersion: process.version,
  platform: process.platform
};

将对象输出成含导出的JS文件，让前端获取数据 (●ˇ∀ˇ●)

JavaScript

// 将对象转换为字符串
const content = `/**
 * Automatically generated build information （。＾▽＾）
 *
 * This file is automatically generated by the \`generate-build-info.js\` script,
 * only used to provide build information for the project!
 *
 * Script author: 白澪·洛丝塔亚([email protected])
 *
 * File created on : ${new Date().toISOString()}
 */

export const buildInfo = ${JSON.stringify(buildInfo, null, 2)}` // 当然这一行才是重点（。＾▽＾）

// 写入文件
const __rootdir = process.cwd()
const outputPath = path.resolve(__rootdir, 'src/build-info.js')
fs.writeFileSync(outputPath, content)

生成脚本文件到此就已经写好了~

使用构建信息 (。>︿<)_θ

生成的信息长这样 ○( ＾皿＾)っCodeCodeCode…

JavaScript

/**
 * Automatically generated build information （。＾▽＾）
 *
 * This file is automatically generated by the `generate-build-info.js` script,
 * only used to provide build information for the project!
 *
 * Script author: 白澪·洛丝塔亚(mio@chyan.moe)
 *
 * File created on : 2025-05-04T16:00:45.517Z
 */

export const buildInfo = {
  "git": {
    "repository": "https://github.com/Miourasaki/kagamie.git",
    "commit": {
      "hash": "427caef",
      "hashFull": "427caef417aa15e3260beb41335dc9d5f8e43296",
      "message": "feat(draw): 新增橡皮工具\n\n变更包括：\n - 👚放大后不再隐藏鼠标，更加容易定位\n - ✏️新增工具：橡皮 可以清除像素点",
      "summary": "feat(draw): 新增橡皮工具",
      "description": "变更包括：\n - 👚放大后不再隐藏鼠标，更加容易定位\n - ✏️新增工具：橡皮 可以清除像素点",
      "date": "Mon May 5 00:00:34 2025 +0800",
      "author": "白澪 · 洛丝塔亚",
      "authorEmail": "[email protected]"
    },
    "branch": "master",
    "tag": "427caef"
  },
  "buildDate": "2025-05-04T16:00:45.514Z",
  "buildTimestamp": 1746374445517,
  "node": {
    "version": "v20.14.0",
    "project": {
      "name": "kagamie",
      "version": "0.1.0.0"
    }
  },
  "platform": "win32"
}

使用时这么做在 ES Module

TypeScript

import { buildInfo } from '../src/build-info'

大致思路就是这样啦。大功告成。ヾ(≧▽≦*)o 来看看效果

这是参考图，使用效果在 RinnTaya/KagamiE 这个项目上对了也可以来看看白澪的这个项目(。・・)ノ ——大家一起来茶绘~

以上，最后大家可以参考白澪的代码片段 # generate-build-info.js ヾ(≧▽≦*)o