Cannot make my JavaScripts babel working

Question

I'm relatively new to ES6/grunt/browserify and trying to setup a simple project with build task and file watcher. I have tried couple of options and i get different errors all the time.

OPTION 1:

Package.json

{
  "name": "browserify-babel-demo",
  "version": "1.0.0",
  "main": "dist/module.js",
  "dependencies": {},
  "devDependencies": {
    "babelify": "^7.2.0",
    "grunt": "^0.4.5",
    "grunt-browserify": "^4.0.1",
    "grunt-contrib-clean": "^0.7.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        browserify: {
            dist: {
                options: {
                    transform: ["babelify"]
                },
                files: {
                    "./dist/module.js": ["./modules/index.js"]
                }
            }
        },
        watch: {
            scripts: {
                files: ["./modules/*.js"],
                tasks: ["browserify"]
            }
        }
    });

    grunt.loadNpmTasks("grunt-browserify");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.registerTask("default", ["watch"]);
    grunt.registerTask("build", ["browserify"]);
};

imports.js

var sum = (a, b = 6) => (a + b);

var square = (b) => {
    return b * b;
};

var variable = 8;

class MyClass {
    constructor(credentials) {
        this.name = credentials.name;
        this.enrollmentNo = credentials.enrollmentNo
    }
    getName() {
        return this.name;
    }
}

export { sum, square, variable, MyClass };

index.js

import {sum, square, variable, MyClass} from './import.js';

console.log(square(5));

var cred = {
    name: 'ABCD',
    enrollmentNo: 11115078
}

var x = new MyClass(cred);

console.log(x.getName());

Error:

Completed in 3.552s at Wed Dec 30 2015 09:33:15 GMT+1100 (AUS Eastern Daylight Time) - Waiting... File "modules\index.js" changed. Running "browserify:dist" (browserify) task C:\Users\pavan.kumar\WebstormProjects\BaseModuleSetup\modules\index.js:1 import { sum, square, variable, MyClass } from './import.js'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module' Warning: Error running grunt-browserify. Use --force to continue.

Aborted due to warnings. Completed in 3.732s at Wed Dec 30 2015 09:34:12 GMT+1100 (AUS Eastern Daylight Time) - Waiting...

OPTION 2:

Package.json

{
  "name": "browserify-babel-demo",
  "version": "1.0.0",
  "main": "dist/module.js",
  "dependencies": {},
  "devDependencies": {
    "babelify": "^7.2.0",
    "grunt": "^0.4.5",
    "grunt-browserify": "^4.0.1",
    "grunt-contrib-clean": "^0.7.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        browserify: {
            dist: {
                options: {
                    transform: [
                        ["babelify", {
                            loose: "all"
                        }]
                    ]
                },
                files: {
                    // if the source file has an extension of es6 then
                    // we change the name of the source file accordingly.
                    // The result file's extension is always .js
                    "./dist/module.js": ["./modules/index.js"]
                }
            }
        },
        watch: {
            scripts: {
                files: ["./modules/*.js"],
                tasks: ["browserify"]
            }
        }
    });

    grunt.loadNpmTasks("grunt-browserify");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.registerTask("default", ["watch"]);
    grunt.registerTask("build", ["browserify"]);
};

import.js and index.js same as above!

Error:

Running "watch" task Waiting... File "modules\index.js" changed. Running "browserify:dist" (browserify) task ReferenceError: [BABEL] C:\Users\pavan.kumar\WebstormProjects\BaseModuleSetup\modules\index.js: Unknown option: base.loose while parsing file: C:\Users\pavan.kumar\WebstormProjects\BaseModuleSetup\modules\index.js Warning: Error running grunt-browserify. Use --force to continue.

Aborted due to warnings. Completed in 3.365s at Wed Dec 30 2015 09:58:14 GMT+1100 (AUS Eastern Daylight Time) - Waiting...

Not sure why its not working!

Thanks for your help!

Update 1:

Added new file called .babelrc based on feedback given by one of the commenters. Following this link Babel file is copied without being transformed

.babelrc

{
    "presets": [
        "es2015"
    ]
}

package.json

{
  "name": "browserify-babel-demo",
  "version": "1.0.0",
  "main": "dist/module.js",
  "dependencies": {
    "babel-preset-es2015": "^6.3.13"
  },
  "devDependencies": {
    "babelify": "^7.2.0",
    "grunt": "^0.4.5",
    "grunt-browserify": "^4.0.1",
    "grunt-contrib-clean": "^0.7.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

Error: Same as above for both options! Need some guidance please

Answer 1

After painful retries and based on the suggestions given in the link https://github.com/babel/babelify/issues/129 I could make it work with slight modification. I'm writing this reply so it makes it easy for others to solve in future!

Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        "browserify": {
            dist: {
                options: {
                    transform: ["babelify"]
                },
                files: {
                    "./dist/module.js": ["./modules/index.js"]
                }
            }
        },
        "babel": {
            "presets": ["react"]
        },
        watch: {
            scripts: {
                files: ["./modules/*.js"],
                tasks: ["browserify"]
            }
        }
    });

    grunt.loadNpmTasks("grunt-browserify");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.registerTask("default", ["watch"]);
    grunt.registerTask("build", ["browserify"]);
};