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/
