So I am using ReactJS through NPM and Browserify however I am trying to figure out how to build it in production mode like the readme says but it does not seems to be working. I have this code to setup the browserify:

var browserify = require('browserify');
var envify = require('envify/custom');
var debug = false;

...

var libraries = browserify({
  debug: debug
}).transform(envify({
  _: 'purge',
  NODE_ENV: debug ? 'development' : 'production'
}));

gulpConfig.tasks.browserify.transformers.forEach(function(transform) {
  libraries.transform(transform);
});

gulpConfig.tasks.browserify.libraries.forEach(function(metaData) {
  if(metaData.path) {
    libraries.require(metaData.path, {
      expose: metaData.name
    });
  } else {
    libraries.require(metaData.name);
  }
});

var libraryStream = libraries.bundle()
.on('error', function(err){
  var message;

  if(err.description)
    message = 'browserify error: ' + err.description + ' when parsing ' + err.fileName + ' | Line ' + err.lineNumber + ', Column ' + err.column;
  else {
    message = err.message;
  }

  gutil.log(gutil.colors.red(message));

  this.emit('end');
})
.pipe(source('libraries.js'));

libraryStream.pipe(gulp.dest(gulpConfig.buildPath));

However when I looked at the piled code, I see a bunch of this:

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

I though it should pile to:

if ("production" !== "production") {

Which could then be automatically removed by tools like UglifyJS2. Am I setting Envify up wrong? or something.

So I am using ReactJS through NPM and Browserify however I am trying to figure out how to build it in production mode like the readme says but it does not seems to be working. I have this code to setup the browserify:

var browserify = require('browserify');
var envify = require('envify/custom');
var debug = false;

...

var libraries = browserify({
  debug: debug
}).transform(envify({
  _: 'purge',
  NODE_ENV: debug ? 'development' : 'production'
}));

gulpConfig.tasks.browserify.transformers.forEach(function(transform) {
  libraries.transform(transform);
});

gulpConfig.tasks.browserify.libraries.forEach(function(metaData) {
  if(metaData.path) {
    libraries.require(metaData.path, {
      expose: metaData.name
    });
  } else {
    libraries.require(metaData.name);
  }
});

var libraryStream = libraries.bundle()
.on('error', function(err){
  var message;

  if(err.description)
    message = 'browserify error: ' + err.description + ' when parsing ' + err.fileName + ' | Line ' + err.lineNumber + ', Column ' + err.column;
  else {
    message = err.message;
  }

  gutil.log(gutil.colors.red(message));

  this.emit('end');
})
.pipe(source('libraries.js'));

libraryStream.pipe(gulp.dest(gulpConfig.buildPath));

However when I looked at the piled code, I see a bunch of this:

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

I though it should pile to:

if ("production" !== "production") {

Which could then be automatically removed by tools like UglifyJS2. Am I setting Envify up wrong? or something.

• javascript
• node.js
• reactjs
• browserify

• 1 You don't appear to have given browserify an entry point for your code - it should be the first argument to browserify() or an entries prop in the options object you're passing. – Jonny Buchanan Commented Mar 9, 2015 at 11:16
• I only added what I though was relevant code but I have updated with full browserify code for building my libraries.js file. Note there is no entry point for the bundle since it just contains the core libraries, file that don't change very often, so I manually add them with require(). – ryanzec Commented Mar 9, 2015 at 13:26

2 Answers 2

React already configures envify automatically. It will pick up the environment that the build script itself is running in. You'd generally set NODE_ENV before running your actual build scripts, e.g.

NODE_ENV=production gulp build

Or even better, you'd have added your build step to the "scripts" block in your package.json, so then you can just do

npm run --production build

simply change to

var libraries = browserify({
  debug: debug
}).transform(envify({
  _: 'purge',
  NODE_ENV: debug ? 'development' : 'production'
}), {
  global: true
});