How do I disable babel minification when not in production?

Question

I am using babelify and babili for JS minification, via gulp:

// Now run the watchifys function for this bundle
watchifysForBundle[jsBundle]
    // Note: we don't use any babel presets - instead we just write code in what evergreen browsers support
    .transform(babelify, {
        presets: ['babel-preset-babili'],
        ignore: ['buffer']
    })

However I can't seem to find how to pass the options to check NODE_ENV and disable babeli when not in production. The babelify docs don't seem to help, even with this common use case.

How can I disable babelify minification when not in production?

Answer 1

Babili is deprecated and has been renamed to babel-minify, so you should be using that instead.

npm install babel-preset-minify --save-dev

To disable the minification in development you simply don't use the babel-preset-minify (or babel-preset-babili for that matter). As you're using Gulp you can use everything Node.js has to offer to decide which presets you want to include, which means that you can check process.env.NODE_ENV and decide whether you want to include the minify preset.

watchifysForBundle[jsBundle]
    .transform(babelify, {
        presets: process.env.NODE_ENV === 'production' ? ['minify'] : [],
        ignore: ['buffer']
    })

An alternative would be to use Babel's env option (not to confuse with babel-preset-env), which uses the configuration that matches the value of BABEL_ENV or NODE_ENV if no BABEL_ENV was defined. This approach is shown in babel-preset-minify - Usage.

{
  "env": {
    "production": {
      "presets": ["minify"]
    }
  }
}

The env option is not really recommended and mainly exists because .babelrc is JSON and there is no good way to define conditional configurations. This will change in Babel 7 which allows a .babelrc.js config where you have the full power of Node.js and that means you could do the same thing as with Gulp.

Answer 2

To avoid minification, don't use uglify

gulp.task('build:js', function(){
    return browserify(
         'test.js'
    )
    .transform('babelify',{
      presets: ['@babel/preset-env']
    })
    .bundle()
    .pipe(source('test.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(gulp.dest('destpath'));
});

Instead try--- adding option- compact:false, global:true in babelify

gulp.task('build:js', function(){
    return browserify(
         'test.js'
    )
    .transform('babelify',{
      presets: ['@babel/preset-env'],
      compact: false,
      global: true
    })
    .bundle()
    .pipe(source('test.js'))
    .pipe(buffer())
    .pipe(gulp.dest('destpath'));
});