Обнаружение производства и разработки React во время выполнения

Можно ли определить, является ли текущая версия React разработкой или производственной во время выполнения? Я бы хотел сделать что-то вроде этого:

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

Лучше всего это сделать с помощью эмуляции способа работы Node с помощью инструмента сборки - webpack, browserify - путем раскрытия process.env.NODE_ENV. Как правило, у вас будет установлено значение «production» в prod и «development» (или undefined) в dev.

Итак, ваш код становится:

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

Чтобы узнать, как его настроить, см. Envify или Передача переменных, зависящих от среды, в webpack.

Я использую вспомогательный файл (в Typescript):

import process from "process";

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

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

Тогда в другом месте я использую это так:

import isDev from "./helpers/DevDetect";

if (isDev())
{
    ...
}

Я хотел получить доступ к этому из index.html и хотел решение, которое не включало бы извлечение веб-пакета или настройку его с дополнительными модулями, и я придумал это.

Источники - это ответ Дэвида выше и документация create-response-app для использования переменных среды в html файле.

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