Berkenalan dengan Babel JS - Koding dengan Next Generation Syntax di Javascript

Dengan babel kita dapat koding dengan sintaks kekinian di Javascript tanpa perlu menunggu official support dari browser atau NodeJS

Wahyudi Wibowo
Wonderlabs
5 min readMay 24, 2017

--

Image courtesy of https://babeljs.io

Javascript adalah salah satu bahasa pemrograman dengan perkembangan yang paling pesat. Berbagai macam fitur dan sintaks diperkenalkan di ES6. Bahkan ES7 sudah masuk dalam tahap rancangan. Namun perkembangan tadi ternyata membutuhkan waktu yang cukup lama untuk dapat diadaptasi baik oleh browser maupun NodeJS. FYI, kita dapat melihat kompatibilitas ES6 di https://kangax.github.io/compat-table/es6/ (browser) dan http://node.green/ (NodeJS).

Lalu apakah kita harus menunggu sampai fitur atau sintaks baru tersebut disupport secara resmi ? Misal perhatikan kode dibawah ini :

Mari kita coba jalankan

Hmm… ternyata kode di atas tidak berjalan sesuai dengan yang diharapkan. Untuk membuktikan apakah benar error di atas terjadi murni karena sintaks yang belum di-support, maka mari kita coba untuk me-rewrite kode di atas tanpa menggunakan import dan async-await. Note: percobaan ini menggunakan node versi 6.10 LTS.

Dan hasilnya, tidak ada error dan file hello.txt berhasil di-generate.

Tapi, mari kita coba bandingkan kode import.js dengan no-import.js. Kira-kira dari segi penulisan dan kerapihan mana yang akan kita pilih ? Saya pribadi memilih yang pertama karena kodenya lebih pendek dan bersih. Namun sekali lagi apakah kita harus menunggu sintaks tersebut di-support agar dapat menuliskan kode yang lebih pendek dan bersih tadi ?

Babel Sang Penyelamat !

Ternyata sudah ada solusi dari permasalahan ini, yaitu dengan menggunakan BABEL. Sesuai dengan tagline-nya “Use next generation Javascript, today.” Kita benar-benar dapat menggunakan fitur dan sintaks terbaru sehingga tidak stuck dengan sintaks yang lama. Hal ini disebabkan karena babel itu sendiri adalah sebuah transpiler, yang tugasnya menterjemahkan sintaks-sintaks yang unsupported ke sintaks yang di-support oleh browser atau NodeJS.

Bagaimana cara memakainya ?

  1. Install Babel dengan npm atau package manager favorit anda, misalnya yarn.

npm install --save-dev babel-cli babel-preset-latest

atau

yarn add --dev babel-cli babel-preset-latest

2. Setelah terinstall, kita dapat mencoba menjalankan script import.js tadi dengan perintah

./node_modules/babel-cli/bin/babel-node.js import.js --presets latest

Dan hasilnya

Voila! Script import.js dijalankan tanpa error dan hasilnya sama dengan script no-import.js :)

Jika penasaran dengan apa yang babel lakukan di balik layar terhadap script import.js , kita dapat meng-copy paste script tersebut ke babel REPL. Script asli kita ada di sebelah kiri, sementara hasil terjemahan script ada di sebelah kanan

Yup, tanpa perlu kita bersusah payah memikirkan kompatibilitas, Babel sudah melakukan semuanya untuk kita. No sweat!

Menggunakan Babel di Production

Contoh di atas hanyalah sekedar penjelasan tentang apa itu babel. Untuk menggunakan babel di production level, kita perlu menempuh langkah yang sedikit berbeda. Mudahnya, kita akan belajar dari contoh yang langsung disediakan oleh Babel di https://github.com/babel/example-node-server (dengan sedikit penyesuaian)

  1. Kali ini kita akan menggunakan nodemon . nodemon berguna untuk melakukan auto restart setiap kali kita merubah script. Jalankan command berikut di CLI.

npm install --save-dev nodemon babel-cli babel-preset-latest

2. Buat directory lib pada project root dan buat file index.js di directory tersebut

3. Buat .babelrc pada root project kita. .babelrc berguna untuk menyimpan konfigurasi babel. Isi .babelrc dengan script berikut

Dengan adanya .babelrc ini kita tidak perlu menambahkan perintah tambahan --preset latest ataupun opsi-opsi lain setiap kali kita memanggil babel.

4. Tambahkan 3 scripts pada package.json yaitu start , build , dan serve . start berguna untuk menjalankan script dan mengcompile script secara langsung. Namun untuk production, jangan menggunakan script ini karena seperti yang sudah diperingatkan di website babel, menjalankan babel-node sangatlah berat dan memakan memory. Untuk keperluan production, gunakan build dan serve . build berguna untuk mengcompile script kita menjadi script dengan sintaks yang di-support, sementara serve digunakan untuk menjalankan script hasil dari compile dengan babel tadi. Keuntungan dari menggunakan metode ini adalah kita dapat me-restart server secara cepat tanpa perlu me-recompile ulang script yang kita punya dengan babel.

5. Jika kita menggunakan git , kita dapat meng-ignore directory dist yang menyimpan hasil compile dari babel. Hal ini penting untuk menjaga agar ukuran repository tidak membengkak dan mencegah conflict.

Buat file .gitignore dan tambahkan kode berikut ke dalamnya.

6. Mari kita coba jalankan scripts tersebut satu-persatu dengan npm atau yarn

npm start

Kita coba panggil http://127.0.0.1:3000 dengan curl untuk memastikan apakah server telah berjalan dengan baik

Great! Namun kita tidak akan menggunakan npm start untuk keperluan production. Kita akan menggunakan npm run build dan npm run serve.

npm run build

Dan kita lihat, file index.js telah di-generate oleh babel di dalam folder dist

Dan kita jalankan npm run serve untuk menjalankan server di production

Server sudah running, mari kita coba panggil url di atas dengan menggunakan curl

Begitulah ulasan singkat dari saya tentang apa itu babel dan bagaimana penggunaannya. Semoga dapat memberikan sedikit pencerahan untuk kawan-kawan semuanya!

Wonderlabs - Build People, Build Value, Build Technology

--

--

Wahyudi Wibowo
Wonderlabs

Dad | Backend Dev : PHP, NodeJS, Go | Lifelong learner | Passionate about programming stuff