「NodeJS」におけるフロントエンドの表示構築とGitのコミット情報

プロジェクトを作成しているとき、白澪は以前他のプロジェクトのウェブページで提出 hashとビルド時間が表示されているのを見たことを思い出しました。だから、自分のプロジェクトでもこれらの情報を表示したいと思いました φ(゜▽゜ *)♪
tips> これは白澪自身の考えで、他の人の例を見つけられなかったため（~~実際にはソースコードを探すのが面倒だった~~）、自分で実装しました

ビルドと Git 情報を取得する，，ԾㅂԾ,,#

白澪の考えは、ビルド前にスクリプトを使ってコマンドを実行し、データを解析して取得することです。まず、スクリプトを作成する必要があります。白澪は通常以下のパスに置きます script/generate-build-info.js

まず、コマンドを実行する関数が必要です △□○(´▽｀)

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
  }
}

次に、コマンドを使用して必要な情報を含むオブジェクトを構築します (☆▽☆) こちらは小さな例です

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 ファイルに出力し、フロントエンドがデータを取得できるようにします (●ˇ∀ˇ●)

// オブジェクトを文字列に変換
const content = `/**
 * 自動生成されたビルド情報 （。＾▽＾）
 *
 * このファイルは \`generate-build-info.js\` スクリプトによって自動生成され、
 * プロジェクトのビルド情報を提供するためだけに使用されます!
 *
 * スクリプト作成者: 白澪·洛丝塔亚(mio@chyan.moe)
 *
 * ファイル作成日 : ${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......

/**
 * 自動生成されたビルド情報 （。＾▽＾）
 *
 * このファイルは自動生成された \`generate-build-info.js\` スクリプトによって生成され、
 * プロジェクトのビルド情報を提供するためだけに使用されます!
 *
 * スクリプト作成者: 白澪·洛丝塔亚(mio@chyan.moe)
 *
 * ファイル作成日 : 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": "mio@chyan.moe"
    },
    "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 でこうします

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

大体の考え方はこんな感じです。大成功です。ヾ (≧▽≦*) o
効果を見てみましょう

これは参考画像で、使用効果は RinnTaya/KagamiE というプロジェクトで確認できます

そういえば、白澪のこのプロジェクトも見てみてください (。・・) ノ —— みんなでお茶をしながら絵を描きましょう～

以上、最後にみんなは白澪のコードスニペットを参考にできます # generate-build-info.js ヾ (≧▽≦*) o

この記事は Mix Space によって xLog に同期更新されました
元のリンクは https://rinn.im/posts/web/nodejs/generate-build-info.js