javascriptbrowserifybabeljsgulp-babel

Is it possible to run a build in browserify/babel against a certain browser target?

Looking at tables such as these: http://kangax.github.io/compat-table/es6/

It looks like Chrome is really close to supporting a lot of ES6, meaning (in my mind) that I should be able to drop the following during development:

var babelifyOptions = {
    presets: ['es2015', 'stage-0', 'react'],
    extensions: ['.js', '.jsx']
};

when using browserify:

browserify(browserifyOptions)
    .transform(babelify.configure(babelifyOptions))
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./dist/js'));

And with that hopefully speeding up build times. When building to production, obviously transpilation is still required.

However, when I drop out es2015 presets, browserify chokes on the build, not understanding things like .... This makes sense, but is it possible to run browserify while targeting Chrome only? (ie allowing token/operators/features that Chrome currently understands).

Solution

  • I do not think browserify is the issue but your version of NodeJS is. I think NodeJS 6 was the first one to support a lot of the ES2015 features by default but notably it does not support the new ES module system. There are a few Babel presets that patch around the things that are missing. Here is just a list of the ones I found in a quick search:

    Note: I've not used any of them so I cannot make a recommendation for you.