title: Using Babel + grunt to work with ES6 - how to transform require statements?
body: <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>