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

문서에서 성능상의 이유로 '개발 모드'에서만 작동 하는 ReactJS의 prop 유효성 검사 기능을 사용하여 시작 되었습니다.

React는 내가 주석을 달 았던 특정 구성 요소의 속성을 검증하는 것 같지만 명시 적으로 '개발 모드'를 켰던 기억이 없습니다.

개발 모드를 트리거 / 토글하는 방법을 검색했지만 운이 없었습니다.

다른 대답은 React 에서 외부 미리 빌드 된 파일을 사용하고 있다고 가정하고 대부분의 사람들이 React를 패키지로 사용 하거나 소비 해야하는 방식은 맞지 않습니다 . 또한이 시점에서 대부분의 React 라이브러리와 패키지 는 동일한 규칙에 따라 프로덕션 중에 개발 시간 도우미를 해제합니다. 축소 된 반응을 사용하는 것만으로도 모든 잠재적 최적화가 테이블에 남게됩니다.

궁극적으로 마법은 process.env.NODE_ENV코드베이스 전체에 대한 참조를 포함하는 React로 귀결 됩니다. 이것은 기능 토글처럼 작동합니다.

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

위의 패턴이 가장 일반적인 패턴이며 다른 라이브러리도이 패턴을 따릅니다. 따라서 이러한 검사를 "비활성화"하려면 다음으로 전환 NODE_ENV해야합니다."production"

"개발 모드"를 비활성화하는 올바른 방법은 선택한 번 들러를 사용하는 것입니다.

웹팩

다음 DefinePlugin과 같이 webpack 구성에서 사용하십시오 .

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

Browserify

Envify 변환을 사용하고 NODE_ENV=production( "set NODE_ENV=production"Windows에서)로 browserify 빌드 단계를 실행하십시오.

결과

그러면 모든 인스턴스가 process.env.NODE_ENV문자열 리터럴로 대체 된 출력 번들이 생성됩니다 ."production"

보너스

변환 된 코드를 축소 할 때 "데드 코드 제거"를 활용할 수 있습니다. 다음 minifier 그 실현을 스마트 충분이 때 DCE는 "production" !== "production"것입니다 항상 거짓 그래서 당신이 바이트를 절약하는 경우 블록의 코드를 제거합니다.

예, 문서화가 잘되어 있지는 않지만 ReactJS 다운로드 페이지에서 개발 및 생산 모드에 대해 이야기합니다.

우리는 React의 두 가지 버전을 제공합니다 : 개발을위한 압축되지 않은 버전과 생산을위한 축소 된 버전. 개발 버전에는 일반적인 실수에 대한 추가 경고가 포함되어있는 반면 프로덕션 버전에는 추가 성능 최적화가 포함되고 모든 오류 메시지가 제거됩니다.

기본적으로 React의 축소되지 않은 버전은 "개발"모드이고 React의 축소 된 버전은 "생산"모드입니다.

"프로덕션"모드에 있으려면 축소 된 버전 만 포함하십시오. react-0.9.0.min.js

나는 이것을 다른 곳에 게시했지만 솔직히 여기가 더 좋은 곳이 될 것입니다.

npm과 함께 React 15.0.1을 설치 import react from 'react'하거나 React의 원시 소스를 react = require('react')실행할 것이라고 가정합니다 ./mode_modules/react/lib/React.js.

React 문서는 ./mode_modules/react/dist/react.js개발 및 react.min.js프로덕션에 사용하도록 제안합니다 .

축소 /lib/React.js하거나/dist/react.js 이 아닌 생산 코드를 축소 된 적이 있다는 경고 메시지가 표시됩니다 반작용, 생산을 위해 :

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-redux는 비슷하게 동작합니다. Redux는 경고 메시지를 표시합니다. 나는 react-dom도 그렇다고 믿는다.

따라서 프로덕션 버전을 사용하는 것이 좋습니다. /dist .

그러나 /dist버전을 축소하면 webpack의 UglifyJsPlugin이 불평합니다.

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버전을 모두 사용합니다 .

• Webpack은 할 일이 적고 더 빨리 완료됩니다. (YRMV)
• React 문서 /dist/react.min.js는 프로덕션에 최적화되어 있다고 말합니다 . 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }plus uglify가 '/dist/react.min.js'만큼 좋은 일을 한다는 증거를 읽지 못했습니다. 나는 당신이 동일한 결과 코드를 얻는 증거를 읽지 못했습니다.
• react / redux 생태계에서 3 개가 아닌 uglify에서 1 개의 경고 메시지를받습니다.

webpack에서 다음 /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'))
    }
  }

webpack 기반 빌드의 경우 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')
    }

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

이 ReactJS.NET / Webpack tutorial 과 같은 작업을하고 있다면 process.env를 사용하여 내가 알 수있는 한 React 개발 모드를 켜고 끌 수 없습니다. 이 샘플은 react.js에 직접 연결되므로 ( Index.cshtml 참조 ) URL을 변경하여 .min.js 또는 축소되지 않은 변형을 선택 하기 만하면됩니다 .

샘플의 webpack.config.js externals: { react: 'React' }에 작업을 수행 할 것임을 암시하는 주석이 있지만 계속 진행하여 페이지에 직접 반응을 포함 하기 때문에 그 이유를 잘 모르겠습니다 .

의 경우 에만 웹팩 V4 사용자 :

지정 mode: production및 mode: development귀하의 웹팩 설정에서하는 것은 정의합니다 process.env.NODE_ENV기본적으로 DefinePlugin를 사용하여. 추가 코드가 필요하지 않습니다!

webpack.prod.js (문서에서 가져옴)

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 문서 : https://webpack.js.org/guides/production/#specify-the-mode

Webpack을 통해 실행되는 수동 빌드 프로세스를 사용하므로 2 단계 프로세스였습니다.

1. cross-env 패키지를 사용하여 package.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.0, 노드 v10.16.14