Erkennen von Produktion und Entwicklung Reagieren Sie zur Laufzeit

95

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
}
pfhayes
quelle

Antworten:

147

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

David L. Walsh
quelle
Dies funktionierte für mich, nachdem ich browserifyund installiert hatte envify.
Pfhayes
4
process is not definedauf dem Client.
Trusktr
5
Sie müssen ein Build-Tool wie Webpack verwenden.
David L. Walsh
7
Wenn Sie die Create-React-App verwenden, process.env.NODE_ENVwird "Entwicklung" im Entwicklungsmodus.
Joseph238
3
Hinzufügen zum Kommentar von @ Joseph238 - Wenn Sie die App "create-react-app" verwenden, process.env.NODE_ENVwird diese für Sie definiert und Sie haben überall in Ihrer App Zugriff darauf. Weitere Informationen finden Sie in der React-Dokumentation .
Shaung Cheng
6

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())
{
    ...
}
James
quelle