Babel.js

Babel adalah sebuah compiler yang digunakan untuk mengubah kode ES6 menjadi ES5. Babel juga dapat digunakan untuk mengubah kode ES7 dan ES8 menjadi ES5. Babel juga dapat digunakan untuk mengubah kode JSX menjadi ES5.

• ES: ECMAScript
• 5,6,7,8: Versi dari ECMAScript

Perubahan code dilakukan untuk menyesuaikan dengan browser yang digunakan. Karena tidak semua browser mendukung ES6, ES7, ES8, dan JSX.

Instalasi

Untuk menginstall babel, kita perlu menginstall beberapa package. Package yang dibutuhkan adalah sebagai berikut:

• @babel/core
• @babel/cli
• @babel/preset-env

Kita dapat menginstall package tersebut dengan perintah berikut:

npm install -D @babel/core @babel/cli @babel/preset-env

Konfigurasi

Setelah menginstall package yang dibutuhkan, kita perlu membuat file konfigurasi untuk babel. File konfigurasi tersebut diberi nama .babelrc. File tersebut berisi konfigurasi babel yang kita butuhkan. File .babelrc dapat dibuat dengan perintah berikut:

touch .babelrc

Setelah file .babelrc dibuat, kita dapat mengisi file tersebut dengan konfigurasi babel yang kita butuhkan. Konfigurasi yang kita butuhkan adalah sebagai berikut:

{
  "extends": "@babel/preset-env"
}

Mengubah Kode

Setelah menginstall package dan membuat file konfigurasi, kita dapat mengubah kode ES6, ES7, ES8, dan JSX menjadi ES5. Kita dapat mengubah kode hasil bundling file JavaScript dari sebelumnya dengan menjalankan perintah berikut:

npx babel ./dist/main.js --out-dir ./dist/es5

Kamu juga dapat mempersingkatnya dengan membuat scripts pada file package.json.

"scripts": {
    "bb:build": "npx babel ./dist/main.js --out-dir ./dist/es5"
},

Kemudian jalankan di terminal:

npm run bb:build

Perintah tersebut akan mengubah kode yang berada di folder src menjadi kode ES5 dan menyimpannya di folder dist.

Kemudian rubah pada script source ../dist/main.js menjadi ../dist/es5/main.js di file index.html.

<script src="../dist/es5/main.js"></script>