web-dev-qa-db-ja.com

create-react-appを使用して、react Webアプリでビルド日時を表示するにはどうすればよいですか？

tl; drバージョン-アプリケーションのフッターに本番アプリケーションのデプロイメントの日付を表示して、ユーザーがアプリケーションが最後に更新された日時を正確に把握できるようにします。

自動化したいのですが、ビルド中に現在の日付時刻をキャプチャして、それをhtml（jsx）に解析して表示する方法は考えられません。

更新-ところで、私はCRAを使用しており、CRAから排出する予定はありません！少なくともこのためではありません。

コンテキスト-なぜこれが必要なのですか？私はReactにアクセスできる無制限の製品アプリケーションを持っています。そこでいくつかの問題が発生しました。私の開発者でそれを複製することができ、私は問題を修正して展開しました（または私はそう思っていました）。しかし、問題は本番環境に残り、より多くの時間のデバッグの後、私は彼らから多くの診断情報を求め、本番APIやデータベースなどに問題がありましたが、本番環境へのデプロイが成功していないことが最終的に判明しました。アプリのどこかに最後のデプロイ日時を表示した場合は、複雑な診断情報を取得するのではなく、ユーザー。

reactjs
13
RawCode

????私は作成者ですReactアプリのメンテナです！

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
6
Joe Haddad
    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;

古いソリューションも機能します。コードをもう一度確認してください。私のアプリで適切な値を見ることができるので。

0
simbathesailor

Webpackを使用してプロセス環境を設定します。値をローカルのjsonファイルに保存し、コンパイル中にインクリメントして読み取ることができます。

0
Dmitrii G.