Babel JS adalah kompiler Javascript. Babel JS mampu mengubah sintaks JavaScript modern (ES6+) menjadi sintaks yang dapat didukung penuh oleh seluruh browser.
Dengan adanya Babel dapat membantu kita dalam menuliskan sintaks Javascript yang versi terbaru tanpa khawatir dukungan pada browser. karena babel dapat mengubah sintaks yang telah kita tulis sehingga dapat diterima oleh browser.
Untuk lebih detailnya mengenai bagaimana babel berkerja. kalian dapat mengunjungi playground yang sudah disediakan oleh Babel untuk mengubah sintaks JavaScript modern (ES6+) menjadi sintaks lama. Berikut ini website offical Babel: https://babeljs.io/repl.
Set Up Node.js
Mari kita siapkan aplikasi Node.js yang akan kita gunakan pada tutorial ini.
Buat folder baru. Untuk tutorial ini, saya akan membuat folder dengan nama babel-nodejs. setelah berhasil silahkan buka folder tersebut didalam terminal kalian.
Selanjutnya kita akan menginisialisasi dan membuat file package.json untuk aplikasi kita:
npm init
Baca Juga
Setelah selesai. Kita buat file baru dengan nama “index.js”.
Install Babel
Kalian bisa ketik perintah berikut di terminal kalian.
npm install --save-dev @babel/cli @babel/core @babel/preset-env
Setelah berhasil menginstall Babel. maka langkah selanjutnya silahkan buat file baru dengan nama .babelrc untuk mengkonfigurasi babel.
Baca Juga
File tersebut akan menyimpan semua opsi yang ingin kita tambahkan ke Babel. Jadi untuk saat ini, kita akan gunakan pengaturan berikut pada pengembangan aplikasi. Kalian bisa copy sintaks diberikut ini.
{ "presets": [ ["@babel/env", { "targets": { "node": "current" } }] ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-object-rest-spread" ] }
Pada konfigurasi diatas berfungsi untuk memberitahu babel bahwa, kita ingin menggunakan tidak hanya pernyataan impor dan ekspor, akan tetapi juga fitur class serta opertator lainnya dari ES6.
Set Up Server
Selanjutnya silahkan buka file “index.js” yang sudah kita buat tadi dan tambahkan kode berikut ini.
import http from 'http'; const server = http.createServer((req, res) => { res.end('Hello Babel JS'); }).listen(3000); console.log('Server is up and running'); export default server;
Dari sintaks di atas, server akan dijalankan pada port 3000 dan kemudian akan mengirim respons “Hallo Babel JS”.
Setelah itu untuk menjalankannya kita perlu melakukan tambahan sintaks build dan start didalam file “package.json” seperti berikut ini.
"scripts": { + "build": "babel index.js -d dist", "start": "npm run build && node dist/index.js" }
Sekarang silahkan jalankan perintah berikut.
npm start
Kemduian silahkan buka localhost:3000 pada browser kalian.
Penutup
Selamat, kita telah berhasil menggunakan Babel Js didalam project Node.js. Jika ada kesulitan kalian bisa komentar dibawah ini.