Consider the following files:

//foo.js
(function(){
  console.log('working');
})();

//bar.js
import 'foo.js';

Now I'm using gulp to piled from ES6 to ES5. Here's the relevant task:

gulp.task('build-js', function() {
  return gulp.src('bar.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('./dist'));
});

My output file looks like this:

'use strict';
require('foo.js');

The isn't the oute I expected. I want all code to import into the single output file using the ES5 conversion. This way, the single JS file can be loaded in a browser and run correctly. What do I need to do for the desired oute?

Since bar.js only imports foo.js, the output file should look exactly like foo.js. Also, since foo.js contains only a self executing function, the output file should execute this immediately and log working to the console.

Consider the following files:

//foo.js
(function(){
  console.log('working');
})();

//bar.js
import 'foo.js';

Now I'm using gulp to piled from ES6 to ES5. Here's the relevant task:

gulp.task('build-js', function() {
  return gulp.src('bar.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('./dist'));
});

My output file looks like this:

'use strict';
require('foo.js');

The isn't the oute I expected. I want all code to import into the single output file using the ES5 conversion. This way, the single JS file can be loaded in a browser and run correctly. What do I need to do for the desired oute?

Since bar.js only imports foo.js, the output file should look exactly like foo.js. Also, since foo.js contains only a self executing function, the output file should execute this immediately and log working to the console.

• javascript
• gulp
• ecmascript-6
• babeljs

Share Improve this question Follow asked Apr 10, 2016 at 8:27 CaribouCodeCaribouCode 14.4k3333 gold badges111111 silver badges185185 bronze badges 7

• 1 Is there any good reason you'd like to bundle it into one big file? With HTTP/2, this usually doesn't make all too much sense anymore. Also, creating one big bundle usually kills your browser's first-render time, causing unnecessary traffic. – Chiru Commented Apr 10, 2016 at 8:57
• @Chiru Will the require statement work in browsers then? I want to reduce the number of calls to the server and improve load times by serving a single minified JS file. It's worked well for me in the past. Otherwise I need to convert every file from ES6 to ES5 and create individual minified versions of each to serve in the browser. – CaribouCode Commented Apr 10, 2016 at 9:31
• Yes, it will. You can transform modules with babel and load them in your browser via a module loader (such as jspm/SystemJS). Serving one single minified JS file could likely not only harm your loading times, but also your build times (especially severely for big projects). As for the second thing you mentioned: Your gulpfile really is just one extra line away from that (.pipe(uglify())). – Chiru Commented Apr 10, 2016 at 9:34
• @Chiru Thanks for your input. I'm just wondering why would the load times be harmed by using a minified JS file? If the file size is smaller than unminified, surely it's quicker to load? – CaribouCode Commented Apr 10, 2016 at 11:28
• It's not the minification that harms load time; it's the bundle (that the client could download/parse/run in parallel) before anything can happen at all on your page. If only a part of the modules were necessary to start off your site, rendering could also start off earlier. Minifying that big bundle only harms build time. – Chiru Commented Apr 10, 2016 at 11:33

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 4

You should add a 'bundle' task if you want to create a single file for the browser. Take a look at browserify or webpack.

http://browserify/ https://webpack.github.io/

You usually need to specify an entry point, and the bundler resolves all the dependencies and creates a single js file.

EDIT:

An example task for gulp, using browserify:

var browserify = require('gulp-browserify');
gulp.task('bundle', function() {
    gulp.src('./dist/bar.js') // entry point
        .pipe(browserify())
        .pipe(gulp.dest('./dist'))
});