How to toggle development mode in React.js

Some features like prop validation feature in react only works when development mode is on. This restriction is made only for the performance reasons. If you are using external built files from react even if its correct most of the developers are not consuming react as a package that way. Most of the React library and package relies on same convention to toggle dev time helpers off during production. React embedding references to process.env.NODE_ENV throughout the codebase will act like feature toggle.

if (process.env.NODE_ENV !== "production")

// do propType checks

To disable these checks we need to toggle NODE_ENV to “production”. Best way to disable “dev mode” is through your bundler.


Webpack

In webpack bundler use DefinePlugin in the webpack config.

new webpack.DefinePlugin({

"process.env": {

NODE_ENV:JSON.stringify("production")

}

})

Browserify

In browserify use Envify and run build with NODE_ENV=production(“set NODE_ENV=production” on windows).

Doing this will produce output bundles which has all the instances of process.env.NODE_ENV replaced with “production” literal string.