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

103

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

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

javascript reactjs

— pfhayes
источник

Ответы:

167

Лучше всего это сделать с помощью эмуляции способа работы 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.

— Дэвид Л. Уолш
источник

У меня это сработало, как только я установил browserifyи envify.

— pfhayes 07

process is not definedна клиенте.

— trusktr

Вам нужно использовать инструмент сборки, такой как webpack.

— Дэвид Л. Уолш

Если вы используете приложение create-react-app, оно process.env.NODE_ENVбудет «разработка» в режиме разработки.

— Joseph238

Добавление к комментарию @ Joseph238 - при использовании приложения create-react-app process.env.NODE_ENVбудет определено для вас, и у вас будет доступ к нему в любом месте вашего приложения. Подробности смотрите в документации React .

— Shaung Cheng

Я использую вспомогательный файл (в 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    
}

— Макс Кэрролл
источник