前端react使用 UmiJS 构建框架 在每次打包时候记录打包时间并在指定页面显示

✅ 实现步骤（适配 UmiJS）

🔧 步骤 1：创建 build.js 脚本（生成时间戳）

在项目根目录下新建文件：

// build.js
const fs = require('fs');
const path = require('path');

const now = new Date();
const formattedTime = now.toLocaleString('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false,
}).replace(/\//g, '-'); 

const content = `export const BUILD_TIME = '${formattedTime}';`;

fs.writeFileSync(path.resolve(__dirname, 'src/utils/buildTime.js'), content);

console.log(`✅ 构建时间已写入：${formattedTime}`);

---

📁 步骤 2：创建目录和文件用于存放时间变量

在项目中创建如下路径和文件：

src/utils/buildTime.js

这个文件将在每次打包前被 build.js 自动覆盖写入当前时间。

---

📦 步骤 3：修改 package.json 的 build 命令

"build": "node build.js && umi build"

这样每次执行 npm run build 时都会先运行 build.js 来写入时间。

---

🧩 步骤 4：在任意页面或组件中引入并打印时间

比如你在 src/pages/home/index.js 或全局入口文件中添加：

import { BUILD_TIME } from '@/utils/buildTime';

console.log(`📦 当前构建时间：${BUILD_TIME}`);

注意：UmiJS 中 @/ 默认指向 src/ 目录，所以你可以放心使用这种写法。

---

✅ 最终效果

当你执行：

npm run build

会输出类似：

✅ 构建时间已写入：2025-06-24 15:30:00

打包后的 JS 文件中也会包含：

console.log('📦 当前构建时间：2025-06-24 15:30:00');

在浏览器控制台中就能看到构建时间。

---

🧪 示例截图（浏览器控制台）

📦 当前构建时间：2025-06-24 15:30:00

---

✅ 总结

步骤	内容
1	创建 build.js 脚本生成时间戳
2	创建 src/utils/buildTime.js 存放时间变量
3	修改 package.json 中的 build 命令
4	在页面中引入并打印时间