Erkennen von Produktion und Entwicklung Reagieren Sie zur Laufzeit

Ist es möglich zu erkennen, ob die aktuelle Version von React zur Laufzeit entwickelt oder produziert wird? Ich möchte so etwas machen:

if (React.isDevelopment) {
  // Development thing
} else {
  // Real thing
}

Dies geschieht am besten durch Emulieren der Node-Methode mit Ihrem Build-Tool - Webpack, Browserify - durch Belichten process.env.NODE_ENV. Normalerweise wird es in Prod auf "Produktion" und in Dev auf "Entwicklung" (oder undefiniert) gesetzt.

So wird Ihr Code:

if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
    // dev code
} else {
    // production code
}

Informationen zum Einrichten finden Sie unter Envify oder Übergeben von umgebungsabhängigen Variablen in Webpack

Ich benutze eine Hilfsdatei (in Typescript):

import process from "process";

const development: boolean = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';

export default function isDev(): boolean
{
    return development;
}

Dann woanders benutze ich es so:

import isDev from "./helpers/DevDetect";

if (isDev())
{
    ...
}

Ich wollte über die index.html darauf zugreifen und wünschte mir eine Lösung, bei der das Webpack nicht ausgeworfen oder mit zusätzlichen Modulen konfiguriert werden musste.

Quellen sind Davids Antwort oben und die Dokumentation zur App zum Erstellen und Reagieren für die Verwendung von Umgebungsvariablen in der HTML-Datei

if ( ! '%NODE_ENV%' || '%NODE_ENV%' === 'development') {
  // dev code
} else {
  // production code    
}