Mengenal Babel, Plugin Javascript Compiler yang Powerful
Seorang web programmer yang bekerja secara remote dan saat ini tinggal di kota Pekalongan. Tertarik belajar apa saja tentang Javascript.
28 September 2017

Waktu kita mulai belajar menulis kode bahasa pemrograman javascript mengikuti standarisasi terbaru dari ecmascript, terkadang kita punya kendala script kita tidak berjalan dengan benar ketika dibuka dari browser, itu bisa saja terjadi karena browser yang digunakan memang belum mendukung versi ecmascript terbaru.

Gimana solusinya? apa kita harus mengubah lagi script kita menggunakan standar ecmascript yang terdahulu. Kabar baiknya kita tidak perlu melakukan itu, karena kita bisa memecahkan masalah tersebut dengan plugin yang bernama babel.

Apa itu babel?Babel merupakan plugin Javascript compiler yang bisa mengubah kode yang ditulis menggunakan ES6 menjadi kode yang bisa berjalan pada browser yang tidak atau belum mendukung ES6.

Untuk mensetup babel kita bisa menggunakan beberapa cara, tapi disini saya hanya akan menunjukkan satu cara saja yang saya ambil dari situs babeljs.io, untuk cara setup selengkapnya kamu bisa melihatnya pada link ini https://babeljs.io/docs/setup

  1. buat sebuah folder dengan nama es6-demo, dan masuk ke folder tersebut
    mkdir es6-demo && cd es6-demo
  2. buat file package.json dengan perintah
    npm init -y
  3. install package npm babel-cli
    npm install --save-dev babel-cli babel-preset-env
  4. edit file package.json menjadi seperti ini
    {
    "name": "es6-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d dist"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.0"
    }
    }
  5. buat sebuah file dengan nama .babelrc dan tuliskan kode ini :
    {
    "presets": ["env"]
    }
  6. selanjutnya buat 2 folder baru di dalam folder es6-demo dengan nama src dan dist

mkdir src dist

7. buat sebuah file html dengan nama index.html

<!DOCTYPE html>

ES6 Demo
8. buat sebuah file app.js di dalam folder src, dan tuliskan contoh kode yang ditulis menggunakan standar ES6

let sayHello = (hello) => { console.log(hello) }; let helloFromIndonesia = 'Halo saya dari Indonesia'; sayHello(helloFromIndonesia);

9. selanjutnya melalui terminal atau command line, ketikkan perintah

npm run build

10. jika tidak muncul pesan error, maka akan ada sebuah file baru di folder dist dengan nama app.js. Dan kalau kita lihat, kode yang sebelumnya kita tulis dengan standard ES6 sudah diubah oleh babel menjadi kode yang ditulis dengan standard ecmascript versi sebelumnya. hasilnya seperti ini :

'use strict'; var sayHello = function sayHello(hello) { console.log(hello); }; var helloFromIndonesia = 'Halo saya dari Indonesia'; sayHello(helloFromIndonesia);


11. Terakhir coba buka file index.html, dan bukan developers tool pada browser,maka pad tab console akan muncul pesan “Halo saya dari indonesia”

Simpel kan? kamu bisa mengeksplore plugin ini melalui situs nya https://babeljs.io/. Dan di situs tersebut juga terdapat console atau compiler online sehingga kita bisa belajar ES6 langsung menuliskan kode disitu dan melihat hasil compilenya.

selamat mencoba. happy coding :)

**Source Code :**
[https://github.com/jstrip/es6-demo]([https://github.com/jstrip/es6-demo)

**Referensi** :
[https://babeljs.io/](https://babeljs.io/)
Blog ini telah dibaca sebanyak 514 kali
javascript babel babeljs plugin compiler pemula

Sekilas Tentang Penulis

Rizqi Maulana
Seorang web programmer yang bekerja secara remote dan saat ini tinggal di kota Pekalongan. Tertarik belajar apa saja tentang Javascript.

KOMENTAR

blog comments powered by Disqus