Babel , a javascript compiler

Apa itu babel , atau babeljs?

Yep , babel adalah sebuah transpiler , a javascript compiler , sebuah source-to-source compiler yang berguna untuk mengubah JavaScript 6 ( ECMAScript2015 atau es6 ) ke JavaScript 5 .
Sebenarnya ada beberapa transpiler di luar sana, sebut saja traceur, saya memilih babel dengan pertimbangan hasil transpile babel lebih readable daripada traceur, selain itu babel support tipe file dengan extension JSX ( JavaScript syntax Extension ) , sebuah extension yang dipakai untuk menulis component dalam React.js
Babel support transformasi fungsi-fungsi baru yang ada pada es6 (latest javascript) seperti fungsi arrow , bind, class dan masih banyak lagi fungsi fungsi yang lain.
Untuk menggunakan babel sangatlah mudah. Asumsi bahwa kita telah menginstal npm (node package manager ) maka cukup dengan mengetikkan sintaks berikut

npm install -g babel-cli

Tambahkan konfigurasi untuk babel pada package.json , berikut contoh package.json :

"babel":{
        "presets":[]
        },

Untuk mentransformasi dari es6 (es2015 ) ke es5 maka dibutuhkan preset untuk es6(es2015) , jalankan perintah berikut :

npm install babel-preset-es2015

Modifikasi konfigurasi babel pada package.json seperti dibawah ini :

"babel":{
        "presets":["es2015"]
        },

Dan selesai , mari kita coba :
1. Buat dua buah direktori dengan nama src dan dest misalnya
2. Didalam src buat sebuah file, misalnya script.js yang isinya adalah fungsi-fungsi dari es6 , misalnya

var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);

3. Lalu jalankan perintah

 babel src -d dest

, ini berarti babel akan mentransform semua file di src untuk kemudian menulisnya di direktori dest
4.Di direktori dest bisa kita lihat file dengan nama yang sama yaitu script.js , namun jika kita lihat isinya akan seperti ini :

"use strict";

var odds = evens.map(function (v) {
  return v + 1;
});
var nums = evens.map(function (v, i) {
  return v + i;
});

Lalu bagaimana dengan react component yang menggunakan extension .jsx ?
Gampang saja , kita cukup menambahkan preset untuk react dengan perintah

npm install babel-preset-es2015

kemudian tambahkan konfigurasi preset di package.json seperti ini :

"presets":["es2015","react"]

.
Selanjutnya ,mari kita coba
1. Buat file dengan ekstensi .jsx , misalnya TextInput.jsx
2. Tuliskan code berikut ini :

import React from 'react';

class TextInput extends React.Component{
render(){
        return(<input type="text"></input>);
    }
}
export default TextInput;

3. Jalankan

babel src -d dest

4. Maka akan terbentuk file di dest dengan nama yang sama yaitu TextInput.js ( ekstensi nya js )
Dan jika kita buka , maka akan ada sederet code javascript , yang didalam nya ada baris berupa seperti berikut :

"use strict";
......

var _react = require("react");

......

var TextInput = function (_React$Component) {
        _inherits(TextInput, _React$Component);

        function TextInput() {
                _classCallCheck(this, TextInput);

                return _possibleConstructorReturn(this, Object.getPrototypeOf(TextInput).apply(this, arguments));
        }

 _createClass(TextInput, [{
                key: "render",
                value: function render() {
                        return _react2.default.createElement("input", { type: "text" });
                }
        }]);

        return TextInput;
}(_react2.default.Component);

exports.default = TextInput;

Sebagai informasi tambahan , babeljs juga bisa kita konfigurasi dengan bundling module seperti Webpack atau Browserify
Demikian sedikit share dari saya tentang babeljs , semoga bermanfaat :D

Sumber :
https://babeljs.io
https://onsen.io/blog/trying-out-javascript-es6-using-babel/
http://ilikekillnerds.com/2015/01/transpiling-wars-6to5-vs-traceur/