简短版 - 我想在应用程序的页脚上显示生产应用程序的部署日期，以便用户知道应用程序上次更新的确切时间。
我希望这是自动的，但我无法想到一种方法来捕获当前日期时间并将其解析为html（jsx）以展示它们。
更新 - 顺便说一句，我使用CRA，并且没有计划退出它！ 至少对于这个问题不会。
背景 - 我为什么需要这个？ 我有一个React生产应用程序，我无法无限制地访问它。有些问题在那里引起了问题，我能够在我的开发环境中复制它，并修复了问题并进行了部署（或者我认为我已经这样做）。但是问题仍然存在于生产中，在更长时间的调试之后，我向他们索取了很多诊断信息，以检查生产API或数据库是否存在问题等。但最终结果是我的部署到生产环境并不成功。我认为，如果我在应用程序的某个位置显示上次部署的日期时间，我就可以直接向用户询问而不必进入详细的诊断信息。
我是 Create React App 的维护者！
从 Create React App 2 (react-scripts@^2.0) 开始，你可以通过宏来实现这个功能。
首先，安装 preval.macro：
$ npm install --save preval.macro # if using npm
$ yarn add preval.macro # if using yarn
接下来，在您要呈现构建时间戳的文件中，包含preval.macro：
import preval from 'preval.macro'
最后，您可以创建一个常量并像这样在您的应用程序中使用它：
const dateTimeStamp = preval`module.exports = new Date().toLocaleString();`
这里是一个完整的例子：
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import preval from 'preval.macro'
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Build Date: {preval`module.exports = new Date().toLocaleString();`}.
</p>
</header>
</div>
)
}
}
export default App
<VersionNumber />。这将显示类似于以下内容：
。import React from 'react';
import moment from 'moment';
import packageJson from '../../../package.json';
import preval from 'preval.macro';
const buildTimestamp = preval`module.exports = new Date().getTime();`;
class Component extends React.Component {
getDateString = () => {
const lastUpdateMoment = moment.unix(buildTimestamp / 1000);
const formattedDate = lastUpdateMoment.format('DD.MM.YYYY HH:mm:ss');
return formattedDate;
};
render () {
return (
<div>
{packageJson.version}
{'.'}
{buildTimestamp}
{' '}
{'('}
{this.getDateString()}
{')'}
</div>
);
}
}
Component.propTypes = {};
Component.defaultProps = {};
export default Component;
使用webpack设置进程环境。您可以将值保存到本地json文件中，并在编译过程中进行增量读取。
对Joe Haddat的回答的贡献；如果你想使用preval.macro在查看器时区而不是构建应用程序的环境时区来说明构建日期，以下是如何操作：
render() {
const buildDate = preval`module.exports = new Date();`
return (
<div>Build Date: {new Date(buildDate).toLocaleString()}</div>
)
}
这将保存构建日期，但将其转换为区域设置字符串仍将在运行时发生，在浏览器中使用查看器时区。
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
REACT_APP_DATE_TIME: new Date().toDateString(),
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
}
);
// Stringify all values so we can feed into Webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
return { raw, stringified };
}
module.exports = getClientEnvironment;
旧的解决方案也可以使用。请再次检查代码。因为我在我的应用程序中看到了正确的值。
npx create-react-app <app-name>创建create-react-app时，它不会自动创建config/env.js。另外，你能给我展示一下你的package.json中的scripts部分吗？ - Ragav Y