Transpiler vs Compiler

Transpilers, or source-to-source compilers, are tools that read the sourcecode written in one programming language and produce the equivalent code in another programming language with a similar level of abstraction.

A good example of transpiler is the Typescript transpiler which converts Typescript code to JavaScript. Similarily, Babel transpiler can also be used for converting the ES6 JS code to ES5 JS sourcecode.

Compilers also convert the code from one language to other language but both languages are very different in abstraction level. For example, Java compiler converts the .java file to .class file.

The difference between transpiler and compiler is in the level of abstraction in the output. Generally, a compiler produces machine-executable code; whereas a transpiler produces another developer artifact.

1. ES6 vs ES5

To understand transpiler, first, we must understand the difference between ES6 and ES5 JavaScripts.

ES6 (ECMAScript 6) is specification for next version JavaScript. Some of its major enhancements include modules, class declarations, lexical block scoping, iterators and generators, promises for asynchronous programming, destructuring patterns, and proper tail calls.

Features are great but most browsers do not support these specifications till today. So any UI application, written with ES6 specification, will not run in these incompatible browsers. To run these applications, the ES6 sourcecode must be converted to supported JavaScript version ES5. ES5 is supported in almost all browsers and ES5 is the most stable version to date.

ES6 – Brings ‘types’ to JavaScript. Bring it closer to strongly typed languages such as Java, C#. Most browsers do not support it till date. It must be converted to ES5 to be executed in browsers.

ES5 – Vanilla JavaScript which we have been writing all these years.

2. Transpiler

A transpiler is a compiler-like program, which converts ES6 JavaScript code to ES5 JavaScript code so that it can run in browsers. When the transpiler sees an expression that uses a language feature that needs to be translated, it produces a logically equivalent expression.

The transpiled expressions can be very similar, or very different from the source expression.

What Transpiler Does?

ES6 code => ES5 code (or even ES4, ES3 as well)

3. Transpiler Demo

Let us see how an ES6 to ES5 transpile works. Create a file helloworld.ts and write this code in it.

3.1. tsconfig.json

Transpiler configuration for typescript is given in tsconfig.json file.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

3.2. ES6 Code

export class HelloWorld {
    constructor() {
        console.log('welcome');
    }
};

3.3. ES5 Code

To compile typescript code to javascript code, use command “tsc helloworld.ts“. It will generate helloworld.js file in same folder.

"use strict";
exports.__esModule = true;
var HelloWorld = /** @class */ (function () {
    function HelloWorld() {
        console.log('welcome');
    }
    return HelloWorld;
}());
exports.HelloWorld = HelloWorld;

The above javascript code has been generated from the typescript transpiler after converting the typescript code into javascript code.

Happy Learning !!