Grunt Traceur Compiler And Watcher For ES6 Code -Tutorial Savvy

Grunt provides a compiler and watch to detect changes in ES6 code and generates the corresponding ES3 code.

In this demo,”We will learn how to implement Grunt for Traceur compiler for ES6 code”.

We need to install Grunt locally to project using following command npm install grunt.The following screenshot shows the terminal with Grunt installation in project.

The 2 modules for Traceur Grunt modules are grunt-traceur-latest and grunt-contrib-watch.

The grunt-traceur-latest module is grunt plug-in for Google's Traceur-Compile, a library to compile ES6 JavaScript into ES3 JavaScript.This module can be installed using following command npm install grunt-traceur-latest.The following command shows the terminal with traceur compiler installation.

The grunt-contrib-watch module is a grunt plug-in for Google’s Traceur-watch, a library to detect ES6 JavaScript code changes.The watch module can be installed using following command npm install grunt-contrib-watch .The following screenshot shows the terminal with the watch installation.

We have modified the project directory structure for this demo.We have 2 directories es6dev and build.The es6dev directory has demo.js file contains all the ES6 JavaScript code.The build directory contains demo.js file which will contain the compiled code.The Grunt configuration is present in Gruntfile.js.The following screenshot shows the project directory structure.

The content of Gruntfile.js is listed below. It uses loadNpmTask() method to load Traceur compiler and watch.A Grunt task named traceur is defined by the initConfig() method.

module.exports = function(grunt){
    grunt.initConfig({
        traceur: {
            options: {
                experimental:true
            },
            custom: {
                files:{
                    'build/demo.js': "es6dev/**/*.js"
                }
            }
        },
        watch: {
            files:"es6dev/**/*.js",
            tasks: "traceur"
        }
    });
    grunt.loadNpmTasks('grunt-traceur-latest');
    grunt.loadNpmTasks('grunt-contrib-watch');
}

The demo.html file contains the JavaScript file generated by traceur compilation build/demo.js and traceur runtime.The following code shows the content of demo.html file.

<!DOCTYPE html>
<html>
<head lang="en">
    <title>Traceur Compilation</title>
    <script src="bower_components/traceur-runtime/traceur-runtime.min.js"></script>
</head>
<body>
    <script src="build/demo.js"></script>
</body>
</html>

Now we can start the Grunt watcher by using command grunt watch.The following command shows the terminal with watcher is getting started and listening to the changes in es6dev/demo.js file.

Now we are all ready to write the ES6 code.We will write a code on class concept.The following code contain a Student class containing constructor block taking name and score as properties.The Student class contains a getter isPassed which check the score and compares the score and returns PASSED or FAILED.If the score is more then 30 then student is PASSED and less then 30 student is FAILED.The code present in the es6dev/demo.js file is as follows:

class Student {
    constructor(name, score) {
        this.name = name;
        this.score = score;
    }
    get isPassed(){
        return this.score>30 ?"PASSED": "FAILED";
    }
}
var student1 = new Student("Sandeep",75);
var student2 = new Student("Sangeeta",25);
console.log("student1: ", student1.isPassed);
console.log("student2: ", student2.isPassed);

The changes in es6dev/demo.js file is detected by Grunt watcher and updates the build/demo.js file.The following screenshot shows the with Grunt watcher in action of detecting changes and updating build/demo.js file.

The generated compiled code is vanilla JavaScript and can be found on build/demo.js file.The following code shows the generated build/demo.js file.

"use strict";
var __moduleName = (void 0);
var Student = function Student(name, score) {
  this.name = name;
  this.score = score;
};
($traceurRuntime.createClass)(Student, {get isPassed() {
    return this.score > 30 ? "PASSED" : "FAILED";
  }}, {});
var student1 = new Student("Sandeep", 75);
var student2 = new Student("Sangeeta", 25);
console.log("student1: ", student1.isPassed);
console.log("student2: ", student2.isPassed);

The output of the above is displayed in following screenshot containing a Chrome console with student1 and student2.

You can download the demo code in below JSBIN.

JS Bin

Grunt Traceur Compiler And Watcher For ES6 Code

Related

Sandeep