Konfigurasi Babel 7 Untuk Dukungan ES6+ Di Node.js

07 Nov 2018 in Programming · 2 min read

Babel merupakan sebuah transpiler atau toolchain yang digunakan untuk mengonversi ECMAScript2015+ atau ES6+ kode menjadi kode yang kompatibel pada semua browser baik browser versi lawas hingga versi terbaru dan juga pada lingkungan seperti Node.js.

Baiklah kita mulai, pertama kita instal dulu dua dependensi utama Babel, yaitu @babel/core dan @babel/cli.

$ npm i @babel/core @babel/cli -g

Dua dependensi tersebut saya instal secara global (-g) supaya bisa diakses dari seluruh path.

Kemudian kita buat project nodejs baru dengan nama (misal) node-es6:

$ mkdir node-es6; cd $_; yarn

yarn bisa diganti dengan npm init jika kita tidak menggunakan yarn.

Lalu kita pasang dependensi development @babel/core dan @babel/preset-env pada project tadi.

$ yarn add @babel/core @babel/preset-env -D

atau menggunakan npm

$ npm i @babel/core @babel/preset-env -D

-D menandakan module atau dependensi tersebut dipasang sebagai dependensi development atau hanya digunakan saat pengembangan.

Selanjutnya kita buat file konfigurasi Babel.

$ touch .babelrc

dan konfigurasinya seperti ini

{
  "presets": ["@babel/preset-env"]
}

Selanjutnya buat dua folder dengan nama src sebagai folder source code dan build sebagai folder hasil kompilasi Babel.

$ mkdir src build

Kemudian buat file JavaScript di dalam folder src misal dengan nama app.js

$ touch src/app.js

Tulis kode di file app.js tersebut seperti ini:

import http from 'http';

const server = http.createServer((req, res) => {
  // bla bla bla...
});

Lalu kita tambahkan perintah kompilasi (dev) dan perintah untuk mejalankan (start) program pada block scripts di file package.json seperti ini

"scripts": {
  "dev": "babel --presets @babel/preset-env -d build/ src",
  "start": "node build/app.js"
}

Jalankan script dev untuk mengkompil kode yang baru kita buat dan start untuk menjalankan kode hasil kompilasi

$ yarn dev && yarn start

atau mengunakan npm

$ npm run dev && npm run start

Jika tidak ada error maka konfigurasi telah berhasil.

Demikian, semoga bermanfaat.


Referensi: Babel.