注意:

当前方法特定为 create-react-app 构建框架,其他的构建流程不同,不能直接照搬 react-scripts 的方式。

✅ 目标:

在 React 打包(build)时,自动将当前时间写入代码中某个变量或 console.log 中,例如:

console.log('Build Time: 2025-06-24 15:09');

✅ 实现思路:

React 默认使用 create-react-app(CRA),它基于 Webpack 构建系统。我们可以通过以下方式实现:

方法一:使用环境变量 + 构建脚本生成时间戳

步骤 1:创建一个 build.js 脚本,在打包前生成时间戳

在项目根目录下新建一个文件: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, '-'); // 格式:2025-06-24 15:09:00const content = `export const BUILD_TIME = '${formattedTime}';`;fs.writeFileSync(path.resolve(__dirname, 'src/buildTime.js'), content);

这个脚本会在 src/ 下生成一个 buildTime.js 文件,内容类似:

export const BUILD_TIME = '2025-06-24 15:09';

步骤 2:在你的 React 项目中引用这个时间戳

比如在 index.js 或任意组件中引入并打印:

import { BUILD_TIME } from './buildTime';console.log(`Build Time: ${BUILD_TIME}`);

步骤 3:修改 package.json 中的 build 命令
"scripts": {"start": "react-scripts start","build": "node build.js && react-scripts build","test": "react-scripts test"
}

这样每次执行 npm run build 时,都会先运行 build.js,自动生成最新的打包时间。


✅ 最终效果:

打包后输出如下日志(在浏览器控制台可见):

Build Time: 2025-06-24 15:09

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/911671.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/911671.shtml
英文地址,请注明出处:http://en.pswp.cn/news/911671.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

原子操作(CAS)

原子操作 原子操作原理什么是原子操作?原子性原子变量相关接口内存序 shared_ptr的实现 原子操作原理 什么是原子操作? 原子操作其实就是指在多线程的环境下,确保对共享变量的操作不会被干扰,从而避免了竞态条件。 我们都知道&…

马克思主义基本原理期末复习下

二十、资本的原始积累 所谓资本原始积累,就是以暴力手段使生产者与生产资料分离资本快速集中于少数人手中,资本主义得以快速发展的历史过程。具体过程其一,用暴力手段夺取农民的土地,如英国圈地运动在国外建立殖民地,…

体育数据api接口,足球api篮球api电竞api,比赛赛事数据api

在体育行业,数据驱动一切,从内容分发到竞猜预测,从用户互动到商业变现,背后少不了一个关键词:数据接口(API)。无论是实时比分、比赛事件、历史统计,还是球员详情、战绩排名&#xff…

Harmony 状态监听 @Monitor和@Computed

Monitor与Computed装饰器在ArkUI状态管理中的协同应用 一、装饰器概述 1. Monitor装饰器 Monitor是ArkUI状态管理V2中的核心装饰器,用于深度监听状态变量的修改: 支持监听嵌套类属性、多维数组项和对象数组中的指定项变化能够获取变化前后的值进行比…

同济大学多模态感知具身导航全面综述

作者: I-Tak Ieong, Hao Tang 单位:同济大学计算机学院,北京大学计算机学院 论文标题: Multimodal Perception for Goal-oriented Navigation: A Survey 论文链接:https://arxiv.org/pdf/2504.15643 主要贡献 基于…

2025年CCF先进音频技术竞赛

由中国计算机学会主办、CCF语音对话与听觉专委会承办、语音之家协办、华为终端有限公司赞助的CCF先进音频技术大赛正式启动。大赛旨在推动国内高等院校及科研院所在音频技术领域的专业人才培养,支持学生科技创新,选拔优秀人才。 赛事官网:ht…

手撕线程池

线程池的目的: 1.复用线程,减少频繁创建和销毁的开销 创建和销毁线程是昂贵的系统操作,涉及内核调度、内存分配; 使用线程池预先创建一批线程,在多个任务间循环复用,避免资源浪费,提高性能。 …

3DTiles三维模型

1. 3DTiles 介绍​ 2016 年,Cesium 团队借鉴传统 2DGIS 的地图规范:WMTS,借鉴图形学中的层次细节模型,打造出大规模的三维数据标准:3d-Tiles,中文译名:三维瓦片。 它在模型上利用了 gltf 渲染…

Golang Kratos 系列:业务分层的若干思考(一)

在使用 Kratos 框架开发云服务的过程中,渐渐理解和感受到“领域层”这个概念和抽象的强大之处,它可以将业务和存储细节解耦、将业务和开发初期频繁变更的API结构,让Mock单元测试变得更加容易、对细节的变化更鲁棒。让业务代码摆脱技术细节依赖…

深度优化OSS上传性能:多线程分片上传 vs 断点续传实战对比

1 卸载开头 对象存储服务(OSS)已成为现代应用架构的核心组件,但随着业务规模扩大,文件上传性能问题日益凸显。本文将深入探讨两种核心优化技术:多线程分片上传和断点续传,通过理论分析、代码实现和性能测试…

doris_工作使用整理

文章目录 前言一、doris整体情况二、doris的存储过程情况1.分类2. 同步物化视图3. 异步物化视图三,分区相关1.分区建的过多前言 提示:doris使用版本3.x 提示:以下是本篇文章正文内容,下面案例可供参考 一、doris整体情况 细节放大 二、doris的存储过程情况 1.分类 按…

左神算法之单辅助栈排序算法

目录 1. 题目2. 解释3. 思路4. 代码5. 总结 1. 题目 请编写一个程序,对一个栈里的整型数据,按升序进行排序(即排序前栈里的数据是无序的,排序后最大元素位于栈顶)。要求最多只能使用一个额外的栈存放临时数据&#xf…

使用Trae编辑器与MCP协议构建高德地图定制化服务

目录 一、使用Trae编辑器配置高德MCP Server 1.1 Trae介绍 1.2 从mcp.so中获取配置高德地图mcp server配置信息 1.3 高德地图开发者配置 1.4 添加Filesystem 到Trae 1.5 使用结果展示 1.6 MCP常见命令行工具和包管理说明 1.7 Function Call工具和MCP技术对比 二、本地…

【LLaMA-Factory 实战系列】三、命令行篇 - YAML 配置与高效微调 Qwen2.5-VL

【LLaMA-Factory 实战系列】三、命令行篇 - YAML 配置与高效微调 Qwen2.5-VL 1. 引言2. 为什么从 WebUI 转向命令行?3. 准备工作(回顾)4. 核心:创建并理解训练配置文件4.1 选择并复制基础模板4.2 逐一解析与修改配置文件4.3 参数详…

推荐:ToB销售B2B销售大客户营销大客户销售培训师培训讲师唐兴通讲销售技巧数字化销售销AI销售如何有效获取客户与业绩

站在AI浪潮之巅,重塑销售之魂 在AI时代,普通销售人员(TOB、TOC)除了传统的销售动作之外,还能做什么?怎么做? 这是《AI销冠》这本书想探讨的核心问题。 特别喜欢编辑老师总结的: 读者…

爬取小红书相关数据导入到excel

本期我们来进行实战,爬取小红书的相关数据导入到excel中,后续可进行些数据分析,今后或者已经在运营小红书的小伙伴应该比较喜欢这些数据。今天我们的主角是DrissionPage,相对于之前介绍的selenium省去了很多的配置,直接安装了就能使用。 DrissionPage 是一个基于 python …

c++面试题每日一学记录- C++对象模型与内存对齐深度原理详解

一、C++对象模型核心原理 1. 对象内存布局基础原理 设计哲学: 零开销原则:不为未使用的特性付出代价(如无虚函数则无vptr)兼容性:C结构体在C++中保持相同内存布局多态支持:通过虚函数表实现运行时动态绑定内存布局实现机制: 编译器处理步骤: 成员排列:严格按声明顺序…

Kafka 监控与调优实战指南(二)

五、Kafka 性能问题剖析 5.1 消息丢失 消息丢失是 Kafka 使用过程中较为严重的问题,可能由多种原因导致。在生产者端,如果配置不当,比如将acks参数设置为0,生产者发送消息后不会等待 Kafka broker 的确认,就继续发送…

Linux下SVN报错:Unable to connect to a repository at URL ‘svn://XXX‘

一、问题描述 Linux下通过SVN执行提交(commit)操作时报错:Unable to connect to a repository at URL svn://XXX: 二、解决方法 导致该问题的一个可能原因是远程仓库的URL发生变化了,即svn服务器的ip变更了。这时可…

Modbus 扫描 从站号、波特率

下载链接:https://pan.quark.cn/s/533ceb8e397d 下载链接: https://pan.baidu.com/s/1PQHn-MwfzrWgF2UrXQDoGg 提取码: 1111