Integrating Babel with Sails front end via Grunt

sails-grunt-babel.md

Sails Babel Integration

Install the grunt hook for babel along with the presets required:

npm install --save grunt-babel babel-preset-es2015

Create tasks/config/babel.js:

module.exports = function(grunt) {

  grunt.config.set('babel', {
    dev: {
      options: {
        presets: ['es2015']
      },
      files: [{
        expand: true,
        cwd: 'assets/js/',
        src: ['**/*.js', '!dependencies/**/*.js'],
        dest: '.tmp/public/js/',
        ext: '.js'
      }]
    }
  });

  grunt.loadNpmTasks('grunt-babel');
};

Edit the default copy task in tasks/config/copy.js to exclude it from processing the JS as this is done by Babel now:

files: [{
  ...
  src: ['**/*.!(coffee|less)', 'js/*.!(js)'],
  ...
}]

Register the new Babel task by editing tasks/register/compileAssets.js as follows:

grunt.registerTask('compileAssets', [
  ...
  'copy:dev',
  'babel:dev',
  ...
]);

You also need to edit tasks/register/syncAssets and add:

grunt.registerTask('syncAssets', [
  ...
  'babel:dev'
]);

At this point you should have ES6 available in the front end.

Source of information: https://gist.github.com/jodyheavener/27a7258b32a9ef80f2fd