Виявлення виробництва проти розробки Реагуйте під час виконання

Чи можна виявити, чи є поточна версія React розробкою чи виробництвом під час виконання? Я хотів би зробити щось подібне:

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

Це найкраще робити, наслідуючи спосіб роботи Node за допомогою інструмента побудови - webpack, browserify - шляхом викриття process.env.NODE_ENV. Як правило, для нього буде встановлено значення "production" у виробництві та "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    
}