[reactjs] ReactJS ‘개발 모드’를 켜고 끄는 방법은 무엇입니까?

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

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'))
    }
  }

답변

     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')
    }

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

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

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