import for front end development

Question

I would like to use the features of ES2016 for my front end development. Especially import and decorators are interesting for me.

I’ve started a small test project and created some different files with classes which I include with import. Babel generates the correct files but includes an require statement which does not work in a browser (as far as I know).

Are there any good tools to concat all files into a single javascript file ordered by their require? Or some libraries for gulp which do this for me?

Answer 1

You get the error because Babel translates your ES2016 code into CommonJS format, browser does not support it. You need some module bundler for creating bundle that can be used in browser:

• Browserify
• Webpack
• Rollup

Example gulp build with gulp-rollup

// setup by `npm i gulp gulp-rollup rollup-plugin-babel babel-preset-es2016 babel-plugin-external-helpers --save-dev`

// gulpfile.js
var gulp       = require('gulp'),
    rollup     = require('gulp-rollup');

gulp.task('bundle', function() {
  gulp.src('./src/**/*.js')
    // transform the files here.
    .pipe(rollup({
      // any option supported by Rollup can be set here.
      "format": "iife",
      "plugins": [
        require("rollup-plugin-babel")({
          "presets": [["es2016", { "modules": false }]],
          "plugins": ["external-helpers"]
        })
      ],
      entry: './src/main.js'
    }))
    .pipe(gulp.dest('./dist'));
});