Use Babel (ES6) with Sails JS

Instructions.md

Inspired by this issue, with these instructions you should be able to get Babel transpiling your JS in Sails JS for the client side.

1. Install Grunt Babel npm install --save grunt-babel
2. Create a babel.js file under tasks/config and add something like the following:

module.exports = function(grunt) {

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

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

It's up to you, but I'm not touching the dependencies folder.

3. Since Babel copies the JS over, update the copy:dev tasks's src to exclude js (copy.js under tasks/config). It should looks something like this:

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

4. Update both compileAssets.js and syncAssets.js under tasks/config to include the Babel dev task: 'babel:dev'

That should do it. Try running sails lift --verbose to see if Babel is running, and then try writing some fancy ES6! If I'm missing something please advise.

In addition now you have to set up presets or it will just copy your js files without any changes

module.exports = function(grunt) {

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

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

Thanks for sharing guys, much appreciated.

Thanks for the clear instructions.
es2015 preset does not handle Promise so the code like "foo = new Promise(...)" is passed through and of course IE 11 barfs on it. Any suggestion about how to get polyfill to work in the above setup? Thx.

Polyfill issue solved by using es6-promise-polyfill. Thx

Don't forget to install babel-core
npm install babel-core babel-loader --save-dev