Using Babel + grunt to work with ES6 - how to transform require statements?
<p>I want to start using ES6, and I want to use grunt to manage my files. This is my project structure so far:</p>

<pre><code>Gruntfile.js
package.json
dist/
src/
  index.es6
</code></pre>

<p>And this is what <code>index.es6</code> looks like:</p>

<pre><code>import MapGL from 'react-map-gl';
const data = [];
const viewport = new Viewport();
</code></pre>

<p>These packages are all defined in <code>package.json</code> and installed. </p>

<p>How do I turn this ES6 file into ES5 JavaScript? Right I'm able to turn it into JavaScript of a sort, but it's not transforming the <code>require</code> statements at all. </p>

<p>This is my current Gruntfile:</p>

<pre><code>module.exports = function(grunt) {
  require('load-grunt-tasks')(grunt);
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/&lt;%= pkg.name %&gt;.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! &lt;%= pkg.name %&gt; &lt;%= grunt.template.today("dd-mm-yyyy") %&gt; */\n'
      },
      dist: {
        files: {
          'dist/&lt;%= pkg.name %&gt;.min.js': ['&lt;%= concat.dist.dest %&gt;']
        }
      }
    },
    jshint: {
      files: ['src/index.js', 'test/index.js'],
      options: {
        reporterOutput: '',
        esnext: true,
        globals: {
          console: true,
          module: true,
          document: true
        }
      }
    },
    babel: {
        files: {
            expand: true,
            src: ['src/*.es6'],
            ext: '-compiled.js'
        },
        options: {
            sourceMap: true,
            presets: ['babel-preset-es2015']
        }
    },
    watch: {
      files: ['&lt;%= jshint.files %&gt;'],
      tasks: ['babel', 'jshint', 'concat']
    }
  });
  grunt.registerTask('default', ['babel', 'jshint', 'concat', 'uglify']);
};
</code></pre>

<p>Running <code>grunt</code> produces the following files:</p>

<pre><code>Gruntfile.js
package.json
dist/
  myproject.js
src/
  index.es6
  index-compiled.js
  index-compiled.map
</code></pre>

<p>But <code>myproject.js</code> contains the line <code>var _reactMapGl = require('react-map-gl');</code> which fails in the browser. </p>