การตรวจจับการผลิตเทียบกับการพัฒนา React ที่รันไทม์

เป็นไปได้หรือไม่ที่จะตรวจพบว่า React เวอร์ชันปัจจุบันกำลังพัฒนาหรือใช้งานจริงในขณะรันไทม์ ฉันต้องการทำสิ่งนี้:

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

นี้จะกระทำที่ดีที่สุดของการลอกเลียนแบบวิธีโหนดในการทำสิ่งที่มีการสร้างเครื่องมือของคุณ - webpack, browserify - process.env.NODE_ENVโดยการเปิดเผย โดยปกติคุณจะตั้งค่าเป็น "การผลิต" ใน "การผลิต" และ "การพัฒนา" (หรือไม่ได้กำหนด) ใน 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 และต้องการโซลูชันที่ไม่เกี่ยวข้องกับการดีด webpack หรือกำหนดค่าด้วยโมดูลเพิ่มเติมและฉันก็คิดสิ่งนี้ขึ้นมา

แหล่งที่มาคือคำตอบของ David ด้านบนและเอกสารcreate-react-app สำหรับการใช้ตัวแปรสภาพแวดล้อมในไฟล์ html

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