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
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 ?
- Install Babel dengan
npm
atau package manager favorit anda, misalnyayarn
.
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)
- 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
{ "presets": ["latest"]}
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.
dist
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