score:9

Accepted answer

they use browserify with envify.

envify will replace your environment variable checks with ordinary strings - only the variables you use will be included, so you don't have to worry about, say, aws_secret_key leaking through either. [...] by running this through a good minifier (e.g. uglifyjs2), the above code would be stripped out completely.

score:1

this is done to enable development-only checks and logging.

if you look through the react source, you'll see if (__dev__) checks, which get replaced with if ("production" !== process.env.node_env) by react's build process.

envify is then used to replace references to process.env.node_env in the source with its current value at the time the build process is run.

for the uncompressed development build of react (and when using the npm version, by default) process.env.node_env is set to "development", so you get the benefit of these extra checks, such as validating props passed to component against its proptypes, warning if controlled components are potentially read-only due to misconfiguration, warnings about lists of items without a key prop and all the other development-mode logging react provides for common problems such as misspelt lifecycle method and html attribute prop names.

for the compressed production build, process.env.node_env is set to "production", so when the build is compressed with uglifyjs, these blocks of code are detected by ugilify's dead code elimination process as code which will never get run and are completely removed from the source.


a nice side-effect of this is that you can take advantage of if ("production" !== process.env.node_env) checks to add development-only checks and logging to your own react components and libraries, since people bundling react from npm currently (with v0.12.2 the current version at the time of writing) have to deal with this as part of their build process.


Related Query

More Query from same tag