Babel - Using Babel with Grunt - Babel - dyclassroom

In this tutorial we will learn to use Babel a JavaScript compiler with Grunt.

Prerequisite

It is assumed that you have Node and NPM installed and you have created a sample project and initialised NPM using npm init command.

Feel free to check the Babel - Getting Started tutorial.

GitHub repository

You can find this project in my GitHub repository babel-project. Please feel free to check that out.

Alright, lets get started.

Step #1: Install Grunt

First install grunt in your project using the following command.

$ npm install --save-dev grunt

This will save Grunt as development dependency in your project.

Step #2: Install Babel

Now we will install babel-core, grunt-babel and babel-preset-env using the following command.

$ npm install --save-dev grunt-babel babel-core babel-preset-env

Note! We are using --save-dev to save them as development dependency.

Step #3: Create `.babelrc` file

Now create .babelrc file inside the project folder and write the following.

{
  "presets": ["env"]
}

Step #4: Create `Gruntfile.js` file

Inside the project folder create Gruntfile.js file and write the following setup for Babel.

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    "babel": {
      options: {
        sourceMap: true
      },
      dist: {
        files: {
          "dist/app.js": "src/app.js"
        }
      }
    }
  });

  // Load the plugin
  grunt.loadNpmTasks('grunt-babel');

  // Default task(s).
  grunt.registerTask('default', ['babel']);

};

In the above code we are configuring Babel.

When we run grunt command inside the project folder it will run Babel which will target the app.js file inside the src directory and will compile and save the final result in app.js file inside the dist directory.

Creating a sample `app.js` file

Lets create src directory inside the babel-project directory and then create app.js file inside the src directory.

Write the following ES6 code inside the src/app.js file.

class HelloWorld {
  greet() {
    return 'Hello World';
  }
}

If we want to compile the above code to ES5 using Babel then we have to run the grunt command in the terminal and it will create app.js file inside the dist directory which will contain the following code.

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var HelloWorld = function () {
  function HelloWorld() {
    _classCallCheck(this, HelloWorld);
  }

  _createClass(HelloWorld, [{
    key: 'greet',
    value: function greet() {
      return 'Hello World';
    }
  }]);

  return HelloWorld;
}();
//# sourceMappingURL=app.js.map

Now, we can use the dist/app.js file in our html files.

Babel - Using Babel with Grunt