如何打开/关闭 ReactJS“开发模式”？

Question

Started using ReactJS's prop validation feature , which as the docs say only works in 'development mode' for performance reasons.

React seems to be validating the properties of a particular component I've annotated, but I don't remember explicitly turning on 'development mode'.

I tried searching for how to trigger/toggle development mode, but haven't had any luck.

Answer 1

The other answer assumes you are using external pre-built files from react, and while correct that is not how most folks are going to or should consume React as a package. Moreover, at this point most every React library and package also relies on the same convention to toggle dev time helpers off during production. Just using the minified react will leave all those potential optimizations on the table as well.

Ultimately the magic comes down to React embedding references to process.env.NODE_ENV throughout the codebase; these act like a feature toggle.

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

The above is the the most common pattern, and other libraries follow it as well. So to "disable" these checks we need to toggle NODE_ENV to "production"

The proper way to disable "dev mode" is through your bundler of choice.

webpack

Use the DefinePlugin in your webpack config like so:

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

Browserify

Use the Envify transform and run your browserify build step with NODE_ENV=production ( "set NODE_ENV=production" on Windows)

Result

This will produce output bundles that has all instances of process.env.NODE_ENV replaced with the string literal: "production"

Bonus

When minifying the transformed code you can take advantage of "Dead Code Elimination". DCE is when the minifier is smart enough to realize that: "production" !== "production" is always false and so will just remove any code in the if block saving you bytes.

Answer 2

Yeah, it's not really well documented, but on the ReactJS download page it talks about development and production modes:

We provide two versions of React: an uncompressed version for development and a minified version for production. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages.

Basically, the unminified version of React is "development" mode, and the minified version of React is "production" mode.

To be in "production" mode, just include the minified version react-0.9.0.min.js

Answer 3

I posted this elsewhere but, frankly, here would be a better place.

Assuming you install React 15.0.1 with npm, import react from 'react' or react = require('react') will run ./mode_modules/react/lib/React.js which is React's raw source.

The React docs suggest you use ./mode_modules/react/dist/react.js for development and react.min.js for production.

Should you minify /lib/React.js or /dist/react.js for production, React will display a warning message that you've minified non-production code:

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 behave similarly. Redux displays a warning message. I believe react-dom does too.

So you are clearly encouraged to use the production version from /dist .

However if you minify the /dist versions, webpack's UglifyJsPlugin will complain.

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

You cannot avoid this message because UglifyJsPlugin can only exclude webpack chunks, not individual files.

I use the both the development and production /dist versions myself.

• Webpack has less work to do and finishes a bit sooner. (YRMV)
• React docs say /dist/react.min.js is optimised for production. I've read no proof that 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') } plus uglify does as good a job as '/dist/react.min.js`. I've read no proof you get the same resulting code.
• I get 1 warning message from uglify rather than 3 from the react/redux ecosystem.

You can have webpack use the /dist versions with:

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

Answer 4

For webpack based build, I used to setup separate webpack.config.js for DEV and PROD. For Prod, resolve the alias as below

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

You can find the working one from here

Answer 5

If you're working from something like this ReactJS.NET / Webpack tutorial , you can't use process.env to switch React development mode on/off as far as I can tell. This sample links to react.js directly (see Index.cshtml ), so you just have to pick .min.js or the non-minified variant by changing the URL.

I'm not sure why that is the case, because the sample's webpack.config.js has a comment that seems to imply the externals: { react: 'React' } would do the job, but then goes ahead and includes react directly into the page.

Answer 6

For only Webpack v4 users:

Specifying mode: production and mode: development in your Webpack config will define process.env.NODE_ENV using the DefinePlugin by default. No additional code necessary!

webpack.prod.js (taken from docs)

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

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

And in our JS:

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

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

Answer 7

I use a manual build process that runs through Webpack, so it was a two-step process for me:

1. Set the environment variable from package.json using the cross-env package:

   "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. Change the webpack.config.js file to use the environment variable (which is passed-on to React to determine if we are in development or production mode), and disable minimizing the produced bundle if we are in development mode so we can see the actual names of our components. We need to use webpack's optimization property in our webpack.config.js file for this:

   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, node v10.16.14