실전 가동과 개발의 검출 런타임에 대응
현재 React 버전이 개발 버전인지 운영 버전인지 런타임에 감지할 수 있습니까?저는 다음과 같은 것을 하고 싶습니다.
if (React.isDevelopment) {
// Development thing
} else {
// Real thing
}
이 작업은 빌드 도구(webpack, browserify)를 사용하여 노드 방식으로 작업을 수행하는 데 가장 적합합니다.process.env.NODE_ENV통상, prod에서는 「production」, dev에서는 「development」(또는 정의되지 않음)로 설정합니다.
따라서 코드는 다음과 같습니다.
if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
// dev code
} else {
// production code
}
설정 방법에 대해서는, Web 팩의 환경 의존 변수 「envify」또는 「Passing」를 참조해 주세요.
도우미 파일(타입 스크립트):
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에서 접속하여 웹팩을 꺼내거나 추가 모듈을 구성하지 않는 솔루션을 원했기 때문에 이 방법을 생각해 냈습니다.
출처는 위의 David의 답변과 html 파일의 환경변수 사용에 관한 create-react-app 문서입니다.
if ( ! '%NODE_ENV%' || '%NODE_ENV%' === 'development') {
// dev code
} else {
// production code
}
import.meta.env이 정도면 충분해!
그import.meta오브젝트는 컨텍스트별 메타데이터를 JavaScript 모듈에 더 많이 표시합니다.
제가 보기에 이것은 새로운 esmodules 가져오기/내보내기 구문과 일치하므로 JS(및 Typescript)에서 환경변수를 읽기 위한 최신 표준입니다.
단, 만약import.metaenv 변수를 사용할 수 없습니다.process.env(좋은 옛 서민들)JS 방식)
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
실제 가동 환경도 여러 개 있는 경우.테스트(테스트 브랜치), 스테이징(스테이징 브랜치), 프로덕션(마스터 브랜치) 등입니다.CICD로 처리하고 있는 것
이 경우 process.env를 입력합니다.NODE_ENV는 3가지 환경 모두에서 '실가동'을 반환합니다.
따라서 이 경우 .env 파일에 변수를 추가할 것을 권장합니다.
.env.실가동
REACT_APP_ENV = "prod"
.env.module
REACT_APP_ENV = "staging"
.env.개발
REACT_APP_ENV = "development"
utils 파일에 함수를 생성할 수 있습니다.
export const isProdMode = (): boolean => {
if (process.env.REACT_APP_ENV === 'prod') {
return true;
}
return false;
}
웹 팩 설정을 변경할 필요는 없습니다.js 코드에 대해 미니화가 유효하게 되어 있는지 확인하기만 하면 됩니다.이것은 실가동 환경에서만 유효하게 됩니다.예: 이 간단한 트릭으로 로깅을 비활성화했습니다.element.type.name 의 이름은 minimization 으로 변경됩니다.
const MyElement = ({isProduction}) => (<div>Environment: {isProduction?'Production':'Development'}</div>);
const MyElementEl = React.createElement(MyElement);
const isProduction = (MyElementEl.type.name !== 'MyElement');
if(isProduction) //will be true when your js sources are minified
console = { ...console, logX: console.log, log: () =>{ } };
ReactDOM.render(<MyElement isProduction={isProduction}/>, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
<div id="app" />
</body>언급URL : https://stackoverflow.com/questions/35469836/detecting-production-vs-development-react-at-runtime
'programing' 카테고리의 다른 글
| 각도 ng-repeat에 의한 부트스트랩 행 추가(3 또는 4 col마다) (0) | 2023.04.05 |
|---|---|
| ASP를 참조합니다.JavaScript에서 ID에 의한 NET 제어? (0) | 2023.04.05 |
| Laravel과 함께 리액트라우터를 사용하는 방법 (0) | 2023.04.05 |
| 파이어베이스의 컬렉션에 여러 문서를 추가하려면 어떻게 해야 합니까? (0) | 2023.04.05 |
| Nextjs: 정적 폴더에서 이미지를 로드할 수 없습니다. (0) | 2023.04.05 |