javascript - การตรวจจับ React เวอร์ชัน production กับ development ในขณะรันไทม์

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

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

คำตอบ #1

สิ่งนี้ทำได้ดีที่สุดโดยการเลียนแบบวิธีการของ Node ในการทำสิ่งต่าง ๆ ด้วยเครื่องมือสร้างของคุณ - webpack, browserify - โดยการเปิดเผย process.env.NODE_ENV โดยทั่วไปคุณจะตั้งค่าเป็น "production" ในสภาพแวดล้อมการผลิต และ "development" (หรือไม่กำหนดค่า) ในสภาพแวดล้อมการพัฒนา

ดังนั้นโค้ดของคุณจะกลายเป็น:

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

สำหรับวิธีการตั้งค่า ดูที่ envify หรือ การส่งตัวแปรที่ขึ้นกับสภาพแวดล้อมใน webpack

คำตอบ #2

ฉันใช้ไฟล์ช่วยเหลือ (ใน 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())
{
    ...
}

คำตอบ #3

`import.meta.env` ก็น่าจะเพียงพอแล้ว!

วัตถุ import.meta เปิดเผยเมตาดาต้าที่เฉพาะเจาะจงตามบริบทแก่โมดูล JavaScript เพิ่มเติมที่นี่

ตามที่ฉันเห็น สิ่งนี้สอดคล้องกับไวยากรณ์การนำเข้า/ส่งออกแบบ esmodules ใหม่ และดังนั้นจึงเป็นมาตรฐานล่าสุดในการอ่านตัวแปรสภาพแวดล้อมใน JS (และ Typescript)

อย่างไรก็ตาม หาก import.meta ไม่สามารถใช้งานได้ ตัวแปร env ควรจะสามารถเข้าถึงได้ใน process.env (วิธีมาตรฐานดี ๆ แบบ commonJS เก่า)

console.log(import.meta.env) // ...or process.env

/* dev */
{
  "MODE": "development",
  "DEV": true,
  "PROD": false,

}
/* prod */
{
  "MODE": "production",
  "DEV": false,
  "PROD": true,
}

นี่หมายความว่าคุณควรจะสามารถทำสิ่งต่างๆ เช่น

 import.meta.env.MODE;
 // or process.env.MODE;

OBS: ค่าภายในวัตถุ env จะแตกต่างกันขึ้นอยู่กับเครื่องมือสร้างที่คุณใช้ในการรันแอปของคุณ

// create-react-app
{
  "NODE_ENV": "development",
  "PUBLIC_URL": "",
  "FAST_REFRESH": true
}

// vite-app
{
  "BASE_URL": "/",
  "MODE": "development",
  "DEV": true,
  "PROD": false,
  "SSR": false
}

// I haven't tested but I'm sure nextJS has it's own env setup