런타임에 생산 및 개발 React 감지

현재 React 버전이 런타임에 개발인지 프로덕션인지 감지 할 수 있습니까? 다음과 같이하고 싶습니다.

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

이는 .NET을 노출하여 빌드 도구 (webpack, browserify)로 작업을 수행하는 Node 방식을 에뮬레이션하는 것이 가장 좋습니다 process.env.NODE_ENV. 일반적으로 prod에서는 "production"으로 설정하고 dev에서는 "development"(또는 정의되지 않음)로 설정합니다.

따라서 코드는 다음과 같습니다.

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

설정 방법은 웹팩에서 envify 또는 환경 종속 변수 전달을 참조하십시오.

헬퍼 파일 (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의 답변 과 html 파일에서 환경 변수 사용에 대한 create-react-app 문서입니다.

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