Babel – Javascript Transpiler

What is Transpiler?

A source to source compiler is called Transpiler or transcompiler.
A compiler translates code from higher level language to lower level programming language, where as transpiler compiles from one language to other or from version to other.

Why are Transpilers Used?

An overview on transpilers on wiki are found here.

  • They are used to modernize the legacy code to next version programming language.
  • For refractoring purpose.

What is Babel?

Babel is javascript transpiler which can be used to compile javascript source.
Babel details are found here.

What Babel offers?

  • Conversion of EcmaScript 2015 & beyond features to javascript supported by browsers.
  • Supports conversion of JSX syntax to React-js javascript components.
  • It comes with pluggable architecture where only required plugin can be executed.

How Babel can be executed?

Babel can be executed in multiple forms, the complete list can be found here.

  • Builtin tools like babel-cli.
  • Build systems.
  • Frameworks.
  • Language APIs.
  • IDEs.

Required Installations

All the required installations can be done via npm.
Install Babel command line, the detailed usage details for CLI are found here

	  npm install babel-cli
	

Babel presets and plugin installation. The complete supported list is found here

	   npm install babel-preset-es2015
	   npm install babel-preset-react
       npm install babel-plugin-transform-object-rest-spread   
	

Usage of Babel

  • Source JSX file – This current example explains the conversion of below es2015 and react jsx features to compatible scripts
    • Es2015 feature – String creation with literal support.
    • Es2015 feature – String interpolation.
    • Es2015 feature – Spread attributes.
    • Es2015 feature – Object spread attributes.
    • Reactjs JSX format.
  • Sample source file
    var React = require('react');
    
    // String creation with literal support
    var mystr = `In JavaScript '\n' is a line-feed.`
    var mymodstr = `In JavaScript
    is a line-feed.`
    
    // String interpolation
    var name = "Bob", time = "today";
    var consolname = `Hello ${name}, how are you ${time}?`
    
    // spread attributes ... is only supported by es2015 modified to Array
    var func = (x, y, ...z) => { console.log(z); return x + y; };
    
    // Object spread attributes need plugins while compilation
    var dataFunc = ({rowIndex, data, col, ...props}) => (
        console.log(data.getObjectAt(rowIndex)[col].toLocaleString())
    );
    
    // The JSX format is converted to js format by babel 
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );
    	   
  • Script compilation
    	 babel --presets es2015,react --plugins transform-object-rest-spread ReactJsx.jsx -o ReactJsxMod.js
    	 
  • Resultant source file with browser compatable javascript code
    "use strict";
    
    function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
    
    var React = require('react');
    
    // String creation with literal support
    var mystr = "In JavaScript '\n' is a line-feed.";
    var mymodstr = "In JavaScript\nis a line-feed.";
    
    // String interpolation
    var name = "Bob",
        time = "today";
    var consolname = "Hello " + name + ", how are you " + time + "?";
    
    // spread attributes ... is only supported by es2015 modified to Array
    var func = function func(x, y) {
      for (var _len = arguments.length, z = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
        z[_key - 2] = arguments[_key];
      }
    
      console.log(z);return x + y;
    };
    
    // Object spread attributes need plugins while compilation
    var dataFunc = function dataFunc(_ref) {
      var rowIndex = _ref.rowIndex;
      var data = _ref.data;
      var col = _ref.col;
    
      var props = _objectWithoutProperties(_ref, ["rowIndex", "data", "col"]);
    
      return console.log(data.getObjectAt(rowIndex)[col].toLocaleString());
    };
    
    // The JSX format is converted to js format by babel
    ReactDOM.render(React.createElement(
      "h1",
      null,
      "Hello, world!"
    ), document.getElementById('example'));
    
    		  
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s