Wykrywanie produkcji a programowanie Reaguj w czasie wykonywania

Czy w czasie wykonywania można wykryć, czy aktualna wersja React jest deweloperska czy produkcyjna? Chciałbym zrobić coś takiego:

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

Najlepiej jest to zrobić emulując sposób działania Node za pomocą narzędzia do kompilacji - webpack, browserify - przez ekspozycję process.env.NODE_ENV. Zwykle będziesz mieć ustawiony na „produkcję” w wersji produkcyjnej i „rozwój” (lub niezdefiniowany) w wersji deweloperskiej.

Twój kod staje się więc:

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

Aby dowiedzieć się, jak to skonfigurować, zobacz envify lub Przekazywanie zmiennych zależnych od środowiska w pakiecie internetowym

Używam pliku pomocniczego (w Typescript):

import process from "process";

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

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

Następnie gdzie indziej używam go w ten sposób:

import isDev from "./helpers/DevDetect";

if (isDev())
{
    ...
}

Chciałem mieć do tego dostęp z pliku index.html i potrzebowałem rozwiązania, które nie wymagałoby wyjmowania webpacka ani konfigurowania go z dodatkowymi modułami i wymyśliłem to.

Źródła to powyższa odpowiedź Davida oraz dokumentacja aplikacji create-react-app na temat używania zmiennych środowiskowych w pliku html

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