BabelJS - Eksekusi Kode ES6
BabelJSadalah transpiler JavaScript, yang mengubah fitur baru yang ditambahkan ke JavaScript menjadi ES5 atau untuk bereaksi berdasarkan preset atau plugin yang diberikan. ES5 adalah salah satu bentuk JavaScript tertua dan didukung untuk berjalan di browser baru dan lama tanpa masalah. Di sebagian besar contoh dalam tutorial ini, kami telah mentranspilasi kode ke ES5.
Kami telah melihat banyak fitur seperti fungsi panah, kelas, janji, generator, fungsi asinkron, dll. Ditambahkan ke ES6, ES7 dan ES8. Ketika salah satu fitur yang baru ditambahkan digunakan di browser lama, ini akan menimbulkan kesalahan. BabelJS membantu dalam mengkompilasi kode, yang kompatibel dengan browser lama. Kami telah melihat bahwa ES5 berfungsi dengan baik di browser lama tanpa masalah. Jadi dengan mempertimbangkan detail lingkungan proyek, jika diperlukan untuk berjalan di browser lama, kami dapat menggunakan fitur baru apa pun dalam proyek kami dan mengkompilasi kode ke ES5 menggunakan babeljs, dan menggunakannya di browser apa pun tanpa masalah.
Mari kita perhatikan contoh berikut untuk memahami hal ini.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>file index.js
var _foo = () => {
return "Hello World"
};
alert(_foo());Keluaran
Saat kami menjalankan html di atas di browser Chrome, kami mendapatkan output berikut -
Ketika HTML dijalankan di Firefox, itu menghasilkan keluaran berikut -
Dan ketika HTML yang sama dijalankan di Internet Explorer, itu menghasilkan kesalahan sintaks berikut -
Kami telah menggunakan fungsi Panah ES6; hal yang sama tidak bekerja pada semua browser seperti yang terlihat di atas. Agar ini berfungsi, kami memiliki BabelJS untuk mengkompilasi kode ke ES5 dan menggunakannya di semua browser.
Akan mengkompilasi file js ke es5 menggunakan babeljs dan memeriksa lagi di browser.
Di file html, kami akan menggunakan index_new.js seperti yang ditunjukkan di bawah ini -
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index_new.js"></script>
</body>
</html>index_new.js
"use strict";
var _foo = function _foo() {
return "Hello World";
};
alert(_foo());Keluaran Chrome
Keluaran Browser Firefox
Output Browser IE
