Setting babel untuk ES6

Saat ini saya mulai menggunakan ES6 atau ES2015 untuk membuat web app dengan JavaScript. Hal ini saya lakukan dengan alasan sintak yang lebih ringkas dan mudah. Akan tetapi, belum semua browser kompatibel dengan ES6 yang berakibat kode ES6 tidak akan berjalan dengan baik di browser yang belum kompatibel. Untuk mencegah hal mengerikan tersebut terjadi pada kode saya, saya harus men-transpile kode ES6 menjadi kode ES5. Beruntungnya ada babel yang dapat saya gunakan untuk men-transpile ES6 menjadi ES5.

Bagaimana menggunakan babel?

Install babel

  1. Buat folder project dengan nama ExampleBabelProject,
  2. Buat file package.json di dalam folder ExampleBabelProject,
  3. Buka terminal kemudian install babel dengan perintah berikut ini.
npm install --save-dev babel-cli babel-preset-env 

Catatan: untuk menjalankan perintah di atas, npm harus sudah terinstall pada komputer Anda.

Setelah menjalankan perintah tersebut maka file package.json berisi dependencies yang telah Anda install seperti pada contoh berikut ini:

{
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-env": "^1.4.0"
}
}

Kode tersebut menunjukkan bahwa Anda telah meng-install library babel-cli dan babel-preset-env. Untuk menggunakan babel, Anda harus memberikan babel preset pada file package.json. Ubah file package.json seperti berikut:

{
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-env": "^1.4.0"
},
"babel": {
"presets": ["env"]
}
}

Uji coba, apakah babel berhasil men-transpile ES6 menjadi ES5

  • Buat folder baru dengan nama src dan build di dalam folder ExampleBabelProject
  • Buat file baru di dalam folder src dengan nama index.js
  • Isikan kode ES6 pada file src/index.js
  • Jalankan perintah berikut untuk men-transpile ES6 menjadi ES5 :
node_modules/.bin/babel src --out-dir build

Perintah tersebut dapat dibaca sebagai “gunakan library babel yang terletak pada folder node_modules/.bin/babel untuk men-transpile semua file yang ada pada folder src yang hasilnya disimpan pada folder build”. Jadi, jika kita mempunyai file src/index.js, hasil transpile akan disimpan pada build/index.js. Begitu juga file — file lain yang ada pada folder src.

Mari kita lihat hasil dari transpile yang dilakukan oleh babel.

src/index.js (ES6)

class Test {
}
console.log(Test)

build/index.js (hasil transpile)

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Test = function Test() {
_classCallCheck(this, Test);
};
console.log(Test);

Bagaimana? Lebih mudah menulis kode ES6 atau ES5?

Membuat script pada package.json

Untuk menjalankan perintah babel, lebih mudah mana

node_modules/.bin/babel src --out-dir build

atau

npm run build

Kalau Anda memilih menggunakan perintah yang pertama, maka berdoalah agar Anda tidak salah mengetik perintah tersebut. Akan tetapi, jika Anda ingin menggunakan perintah yang kedua, Anda perlu membuat scripts yang akan dijalankan npm pada file package.json.

Ubah file package.json dengan menambahkan scripts seperti pada contoh berikut:

{
"scripts": {
"build": "babel src --out-dir build"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-env": "^1.4.0"
},
"babel": {
"presets": ["env"]
}
}

Dengan menambahkan scripts pada package.json, kita dapat menjalankan perintah build dengan hanya mengetikan perintah npm run build.


Kesimpulan

Berdasarkan hasil yang sudah kita tes di atas, hasil uji coba menunjukkan bahwa babel berhasil men-transpile ES6 menjadi ES5, sehingga kita dapat menggunakan ES6 tanpa takut kode kita tidak berjalan pada browser yang tidak kompatibel dengan ES6.

So, let’s say thank you to babel. Thanks babel!!!

Source code dapat dilihat di repo: https://github.com/sigidhanafi/javascript/tree/master/ExampleBabelProject

Show your support

Clapping shows how much you appreciated Sigit Hanafi’s story.