ReactJS '개발 모드'를 켜거나 끄는 방법은 무엇입니까?

ReactJS '개발 모드'를 켜거나 끄는 방법은 무엇입니까?

React 사용 시작JS의 프로펠러 검증 기능은 문서에서는 성능상의 이유로 '개발 모드'에서만 작동합니다.

React는 내가 주석을 단 특정 구성 요소의 속성을 검증하는 것처럼 보이지만, 명시적으로 '개발 모드'를 켜지는 것은 기억나지 않습니다.

현상 모드를 트리거/토글 하는 방법을 검색해 보았지만, 아직 찾을 수 없었습니다.

다른 답변은 리액션에서 미리 빌드된 외부 파일을 사용하고 있다고 가정합니다.그렇지만 대부분의 사용자가 리액트를 패키지로 사용하거나 패키지로 사용해야 하는 방법은 아닙니다.게다가 이 시점에서는, 대부분의 React 라이브러리와 패키지도, 같은 규칙에 근거해, 개발 시간의 헬퍼를 오프로 하고 있습니다.최소화된 반응을 사용하는 것만으로 이러한 모든 잠재적 최적화가 실현됩니다.

됩니다.process.env.NODE_ENV코드 베이스 전체에 걸쳐 기능 토글과 같이 동작합니다.

if (process.env.NODE_ENV !== "production")
  // do propType checks

위의 패턴은 가장 일반적인 패턴이며, 다른 라이브러리도 이를 따르고 있습니다.를 「비활성화 , 「비활성화」를 전환할 가 있습니다.NODE_ENV로로 합니다."production"

「dev 모드」를 무효로 하는 적절한 방법은, 선택한 번들러를 사용하는 것입니다.

웹 팩

다음과 같이 웹 팩 설정에서 를 사용합니다.

new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify("production")
})

브라우저화

Envify 변환을 사용하여 다음과 같이 브라우저 구성 단계를 수행합니다.NODE_ENV=production )"set NODE_ENV=production"Windows 의 windows)

결과

인스턴스가 됩니다.process.env.NODE_ENV리터럴로 됩니다."production"

보너스

DCE는 DCE가 다음과 같은 것을 인식할 수 있을 입니다.는 DCE를 말합니다."production" !== "production"는 항상 false이기 때문에 if blocks saving your bytes(바이트를 절약하는 경우) 내의 모든 코드를 삭제합니다.

네, 잘 기록된 건 아니지만 리액트에 따르면JS 다운로드 페이지에는 개발 및 프로덕션 모드에 대해 설명합니다.

React의 두 가지 버전, 즉 개발용 압축되지 않은 버전과 프로덕션용 두 가지 버전이 있습니다.개발 버전에는 일반적인 오류에 대한 추가 경고가 포함된 반면 운영 버전에는 추가 성능 최적화가 포함되어 모든 오류 메시지가 제거됩니다.

기본적으로 React의 미니화되지 않은 버전은 "개발" 모드이고, React의 미니화 버전은 "실가동" 모드입니다.

, 「 version」( 버전)을만 하면 .react-0.9.0.min.js

다른 곳에 올렸는데 솔직히 여기가 더 좋을 것 같아요.

npm과 , "15.0.1" npm"은 "npm"으로 설정됩니다.import react from 'react' ★★★★★★★★★★★★★★★★★」react = require('react')./mode_modules/react/lib/React.js리액트의 원천이죠

에서는 " " 를 사용할 합니다../mode_modules/react/dist/react.js 및 ★★★★★★★★★★★★★★★★react.min.js산용입입니니다

/lib/React.js ★★★★★★★★★★★★★★★★★」/dist/react.js React는 비 코드를 를 표시합니다. "React"는 "React"입니다.

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See fb.me/react-minification for more details.

react-dom, redux, react-synamx도 비슷하게 동작합니다.Redx에 경고 메시지가 표시됩니다.리액트돔도 그렇겠지

제작 것 같습니다./dist.

, 「」를 경우는, 「」입니다./distUglifyJsPlugin 이의 。

WARNING in ../~/react/dist/react.js Critical dependencies: 4:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ../~/react/dist/react.js 4:478-4851

UglifyJsPlugin은 개별 파일이 아닌 웹 팩 청크만 제외할 수 있으므로 이 메시지를 피할 수 없습니다.

사용하고 있습니다./dist전입니니다다

• Web pack은 할 일이 적고, 조금 더 빨리 종료됩니다.(YRMV)
• 에서는요./dist/react.min.js생산용으로 최적화되어 있습니다. 라 that i i'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }는 '/합니다.같은 암호를 얻었단 증거는 못 읽었어요
• 리액트/레듀스 생태계에서 3개가 아닌 uglife에서 1개의 경고 메시지가 나타납니다.

할 수 ./dist★★★★

resolve: {
    alias: {
      'react$': path.join(__dirname, 'node_modules', 'react','dist',
        (IS_PRODUCTION ? 'react.min.js' : 'react.js')),
      'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist',
        (IS_PRODUCTION ? 'react-dom.min.js' : 'react-dom.js')),
      'redux$': path.join(__dirname, 'node_modules', 'redux','dist',
        (IS_PRODUCTION ? 'redux.min.js' : 'redux.js')),
      'react-redux$': path.join(__dirname, 'node_modules', 'react-redux','dist',
        (IS_PRODUCTION ? 'react-redux.min.js' : 'react-redux.js'))
    }
  }

웹 팩 기반 빌드의 경우 DEV와 PROD용으로 별도의 webpack.config.js를 설정했습니다.Prod의 경우 다음과 같이 에일리어스를 해결합니다.

     alias: {
        'react$': path.join(__dirname, 'node_modules', 'react','dist','react.min.js'),
        'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist','react-dom.min.js')
    }

여기서 작업하는 것을 찾을 수 있습니다.

리액트JS와 같은 일을 하고 있다면.NET/Webpack 튜토리얼에서는 process.env를 사용하여 React 개발 모드를 켜거나 끌 수 없습니다.이 예에서는 react.js에 직접 링크되므로(Index.cshtml 참조), URL을 변경하여 .min.js 또는 비미니파이드 배리언트를 선택하면 됩니다.

수 샘플의 webpack.config에는 webpack.config.js를 입니다.externals: { react: 'React' }이 작업을 수행할 수 있습니다.그런 다음 페이지에 직접 반응하는 것을 포함합니다.

Webpack을 통해 실행되는 수동 빌드 프로세스를 사용하기 때문에 다음과 같은 두 단계 프로세스가 필요했습니다.

1. 패키지에서 환경 변수를 설정합니다.cross-env 패키지를 사용하는 json:

   "scripts": { "build-dev": "cross-env NODE_ENV=development webpack --config webpack.config.js", "build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js" }

2. webpack.config.js 파일을 환경변수(개발모드인지 실제 가동모드인지를 판단하기 위해 React로 전달)를 사용하도록 변경하고 개발모드일 경우 생성된 번들의 최소화를 비활성화하여 컴포넌트의 실제 이름을 확인합니다.이를 위해서는 webpack.config.js 파일에 있는 webpack의 최적화 속성을 사용해야 합니다.

   optimization: { nodeEnv: process.env.NODE_ENV, minimize: process.env.NODE_ENV === 'production' }

webpack v4.41.5, React v16.9.19, cross-env v7.0, 노드 v10.16.14

Webpack v4 사용자만:

지정mode: production그리고.mode: development웹 팩 구성에서는process.env.NODE_ENV기본적으로 DefinePlugin을 사용합니다.추가 코드는 필요 없습니다!

webpack.webpack.webpack(docs에서 취득)

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

그리고 JS에서는:

console.log(process.env.NODE_ENV) // --> 'development' or 'production'

Webpack Docs: https://webpack.js.org/guides/production/ #https-the-mode

언급URL : https://stackoverflow.com/questions/22118915/how-to-turn-on-off-reactjs-development-mode