Mendeteksi produksi vs. pengembangan Bereaksi saat runtime

Apakah mungkin untuk mendeteksi apakah versi React saat ini adalah pengembangan atau produksi pada saat runtime? Saya ingin melakukan sesuatu seperti ini:

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

Ini paling baik dilakukan meniru cara Node melakukan sesuatu dengan alat build Anda - webpack, browserify - dengan mengekspos process.env.NODE_ENV. Biasanya, Anda akan menyetelnya ke "produksi" di prod dan "pengembangan" (atau tidak ditentukan) di dev.

Jadi kode Anda menjadi:

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

Untuk cara menyiapkannya, lihat envify atau Meneruskan variabel dependen lingkungan di webpack

Saya menggunakan file helper (di Typecript):

import process from "process";

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

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

Kemudian di tempat lain saya menggunakannya seperti ini:

import isDev from "./helpers/DevDetect";

if (isDev())
{
    ...
}

Saya ingin akses ke ini dari index.html dan menginginkan solusi yang tidak melibatkan mengeluarkan webpack atau mengonfigurasinya dengan modul tambahan dan saya menemukan ini.

Sumber adalah jawaban David di atas dan dokumentasi create-react-app untuk menggunakan variabel lingkungan di file html

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