当前位置：首页 > news >正文

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

news 来源：原创 2025/6/25 9:25:55

✅ 实现步骤（适配 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	在页面中引入并打印时间