Using Babel + grunt to work with ES6 - how to transform require statements?

Question

I want to start using ES6, and I want to use grunt to manage my files. This is my project structure so far:

Gruntfile.js
package.json
dist/
src/
  index.es6
         


        

Answer 1

Yes, as per @Matthew Herbst recommendation, Browserify will handle the import bindings for the ES6 modules. Also a package named babelify will help to handle your babel browserify transform.

The following seems to work well:

Use babel-cli instead of babel.

1. It's worth noting that Babel has been replaced with babel-cli as of babel 6 (see their blog for more info on that). So, firstly, remove/uninstall it from your package.json (if it exists!):

   $ npm uninstall babel --save-dev

   ...and uninstall grunt-babel:

   $ npm uninstall grunt-babel --save-dev

2. Install babel-cli and also include the babel preset for all es2015 plugins:

   $ npm install --save-dev babel-cli babel-preset-es2015

3. Next, create a .babelrc file and save it in your projects root directory containing the following code:

    {
        "presets": ["es2015"]
    }

grunt-browserify

4. Next, install grunt-browserify and save it to your package.json:

   $ npm install grunt-browserify --save-dev

babelify

5. Install babelify to handle your babel browserify transform:

   $ npm install babelify --save-dev

Gruntfile.js

6. Next update your Gruntfile.js by deleting the existing babel task:

    // DELETE the following...
    babel: {
        files: {
            expand: true,
            src: ['src/*.es6'],
            ext: '-compiled.js'
        },
        options: {
            sourceMap: true,
            presets: ['babel-preset-es2015']
        }
    },

7. ...and adding the following browserify task instead:

    browserify: {
        dist: {
            files: {
                // destination for transpiled js : source js
                'dist/myproject.js': 'src/index.es6'
            },
            options: {
                transform: [['babelify', { presets: "es2015" }]],
                browserifyOptions: {
                    debug: true
                }
            }
        }
    }

8. Registering your grunt tasks: It's likely that you will also need to update and change the order of the tasks in the array passed to grunt.registerTask. To this:

grunt.registerTask('default', [
    'jshint',
    //'concat', <-- Probably don't need to concat the files, assuming index.es6 imports the necessary modules.
    'browserify:dist',
    'uglify'
]);

Additional note:

There may be some benefits in using react presets in addition to the es2015 presets - which would entail modifying points 2, 3, and 7 above accordingly, however, I haven't used it myself.

Hope this helps!