What is Traceur Compiler?

In this article, we will see the Traceur Compiler, along with understanding its installation process, & basic usage with the help of examples.

Traceur Compiler is the JavaScript Compiler that is used while developing code in Angular JS. This compiler is fully supported by ECMAScript(ES6) and ES.vNext‘s features. It allows us to make use of all the future JavaScript features which may or may not currently be a native offering in modern web browsers. In other words, we can say that the Traceur compiler/transpiler compiles ECMAScript edition 6 (ES6) into regular Javascript (ECMAScript Edition 5 [ES5]) which runs in our browser.

Features of Traceur Compiler:

• Whenever we inform the standard process, i.e. we write code, which in terms of Traceur Compiler means that it allows us to try out new and proposed language features today.
• It is a JavaScript.next-to-JavaScript-of-today compiler.
• It allows us to use features from the future today, which has more features and encourages design patterns.
• It is simple and much more advanced as compared to other compilers.
• We can simply use this Compiler by pasting the piece of ES6 code into the Read-eval-print-loop page.
• It also supports ECMAScript(ES6) and ES.vNext’s features which makes it compatible with the browser.
• This compiler is provided by Google for testing the ES6 feature.

Usage of Traceur Compiler: Traceur Compiler can be used in several ways, these are listed below:

• It informs the new JavaScript design features.
• It allows us to write the code in a much better manner and prefer us to use design patterns.
• Traceur compilers are widely used in Angularv2.0 while developing code.
• Its features make it suitable for the browser.
• Traceur Compiler is a way to write the next version of JavaScript and compile it down to JavaScript that we can use today. 

Step for installing the Traceur Compiler:

• The very 1st step is to set up Traceur in the system, i.e, to install the node actually. For installing a node, visit nodejs.org, this is the official website that actually helps to set up the node.
•  We will set up Traceur in our system. For this, write the following command in the terminal, which will globally install Traceur in the system.

npm install traceur -g

• After Traceur has been successfully installed, we have to write traceur and hit the enter button. If the screen shows something like the below image, then Traceur has been installed in the system. 

• Now, write a simple javascript code, and compile the javascript file

2.js:

console.log('GeeksforGeeks!!!);

Note: A basic simple file named index.html is already created in the folder for the traceur compiler.

• The next step is that, open the command window in the same file directory, where you have written the ES6 Program, and write the below command:

traceur file_name

•  As a result, we can see that the above command not only compiles the code but actually executes the program.
• Now, our compiled code should be in a different file, because the compiled code will be used in our HTML and our websites.
• The –out flag in the command would compile our output file into a different file.  All these files are the input files which would be just compiled by traceur and would be compiled into a single file. Now, run the command and hit enter:

• Now, we have our compiled file and successfully installed and set up Traceur Compiler.

Javascript

$traceurRuntime.registerModule("2.js", [], function() {
      "use strict";
      var __moduleName = "2.js";
      console.log('GeeksforGeeks!!!');
      return {};
});
$traceurRuntime.getModule("2.js" + '');

After successfully installing and setting up the Traceur Compiler, let’s understand the above concept with the help of a simple example.

Example: In this example, we will see how the simple JS code will be compiled by the Traceur Compiler, which will generate another file by executing with the simple Traceur command, which is described below:

Step 1: Write the below JavaScript code and compile this JavaScript file(thinking that it’s a complex JavaScript ES6 Program, & this is only for testing purposes). 

• firstFile.js:

console.log('Welcome to GeeksforGeeks Learning!');

Step 2: Now, open the command window in the same file directory, where you have written the ES6 Program, and write the below command. As a result, we can see that the command not only compiles the code but actually executes the code.

traceur firstFile.js

Step 3:  The -out flag in the command (when we write traceur in the command window) would compile our output file into a different file. Now, run the below command and hit enter:

traceur --out secondFile.js firstFile.js

The compiled file “secondFile.js” is as follows:

• secondFile.js:

Javascript

$traceurRuntime.registerModule("firstFile.js", [], function() {
      "use strict";
      var __moduleName = "firstFile.js";
      console.log('Welcome to GeeksforGeeks Learning!');
      return {};
});
$traceurRuntime.getModule("firstFile.js" + '');

Benefits of Traceur Compiler: 

• Traceur Compiler makes it easy to implement the code. 
• Its reachability ensures that the method has a return statement. 
• It helps in compiling ECMAScript edition 6 (ES6) into regular Javascript (ECMAScript Edition 5 [ES5]) .
• It supports ECMAScript(ES6) and ES.vNext’s features.
• This compiler is simple and much more advanced compared to other compilers.

Applications of Traceur Compiler:

• Traceur Compiler made the user easy to use all the future JavaScript features.
• These features may or may not be presently available in modern web browsers, but in spite of that, we can use them.
• Developing code in Angular JS is done with ease with the introduction of the Traceur compiler.
• It makes regular JavaScript compatible with the browser.

Reference: https://github.com/google/traceur-compiler