BabelJS - Ikhtisar

BabelJSadalah transpiler JavaScript yang memindahkan fitur-fitur baru ke dalam standar lama. Dengan ini, fitur dapat dijalankan di browser lama dan baru, tanpa repot. Pengembang Australia, Sebastian McKenzie memulai BabelJS.

Mengapa BabelJS?

JavaScript adalah bahasa yang dimengerti browser. Kami menggunakan browser yang berbeda untuk menjalankan aplikasi kami - Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, UC browser dll. ECMA Script adalah spesifikasi bahasa JavaScript; ECMA Script 2015 ES6 adalah versi stabil yang berfungsi dengan baik di semua browser baru dan lama.

Setelah ES5, kami memiliki ES6, ES7, dan ES8. ES6 dirilis dengan banyak fitur baru yang tidak didukung sepenuhnya oleh semua browser. Hal yang sama berlaku untuk ES7, ES8 dan ESNext (versi ECMA Script berikutnya). Sekarang tidak pasti kapan semua browser dapat kompatibel dengan semua versi ES yang dirilis.

Jika kami berencana untuk menggunakan fitur ES6 atau ES7 atau ES8 untuk menulis kode kami, itu akan cenderung rusak di beberapa browser lama karena kurangnya dukungan dari perubahan baru. Oleh karena itu, jika kita ingin menggunakan fitur-fitur baru ECMA Script dalam kode kita dan ingin menjalankannya pada semua kemungkinan browser yang tersedia, kita membutuhkan alat yang akan mengkompilasi kode terakhir kita di ES5.

Babelmelakukan hal yang sama dan disebut transpiler yang mentranspilasi kode dalam versi Script ECMA yang kita inginkan. Ini memiliki fitur seperti preset dan plugin, yang mengkonfigurasi versi ECMA yang kita butuhkan untuk mentranspilasi kode kita. Dengan Babel, pengembang dapat menulis kode mereka menggunakan fitur baru di JavaScript. Pengguna bisa mendapatkan kode-kode tersebut ditranspilasi menggunakan Babel; kode tersebut nantinya dapat digunakan di browser apa pun tanpa masalah apa pun.

The following table lists down the features available in ES6, ES7 and ES8 −

fitur	Versi ECMA Script
Biarkan + Const	ES6
Fungsi Panah	ES6
Kelas	ES6
Janji	ES6
Generator	ES6
Iterator	ES6
Modul	ES6
Merusak	ES6
Template Literals	ES6
Objek yang Ditingkatkan	ES6
Properti Default, Istirahat & Sebarkan	ES6
Async - Tunggu	ES7
Operator Eksponensial	ES7
Array.prototype.includes ()	ES7
String Padding	ES8

BabelJS mengelola dua bagian berikut -

transpiling
polyfilling

Apa itu Babel-Transpiler?

Babel-transpiler mengubah sintaks JavaScript modern menjadi bentuk, yang dapat dengan mudah dipahami oleh browser lama. Misalnya, fungsi panah, konst, biarkan kelas akan diubah menjadi fungsi, var, dll. Di sini sintaksnya, yaitu, fungsi panah diubah ke fungsi normal dengan menjaga fungsionalitas tetap sama di kedua kasus.

Apa itu Babel-polyfill?

Ada fitur baru yang ditambahkan dalam JavaScript seperti janji, peta, dan penyertaan. Fitur dapat digunakan pada array; sama, bila digunakan dan ditranspilasi menggunakan babel tidak akan dikonversi. Jika fitur baru adalah metode atau objek, kita perlu menggunakan Babel-polyfill bersama dengan transpiling untuk membuatnya berfungsi di browser lama.

Berikut adalah daftar fitur ECMA Script yang tersedia dalam JavaScript, yang dapat ditranspilasi dan di-polyfill -

Classes
Decorators
Const
Modules
Destructing
Parameter default
Nama properti yang dihitung
Objek istirahat / menyebar
Fungsi asinkron
Fungsi panah
Parameter istirahat
Spread
Template Literals

ECMA Script features that can be polyfilled −

Promises
Map
Set
Symbol
Weakmap
Weakset
includess
Array.from, Array.of, Array # find, Array.buffer, Array # findIndex
Object.assign,Object.entries,Object.values

Fitur BabelJS

Pada bagian ini, kita akan belajar tentang berbagai fitur BabelJS. Berikut adalah fitur inti terpenting dari BabelJS -

Babel-Plugins

Plugin dan Preset adalah detail konfigurasi untuk Babel untuk mentranspilasi kode. Babel mendukung sejumlah plugin, yang dapat digunakan secara individual, jika kita mengetahui lingkungan tempat kode akan dijalankan.

Babel-Preset

Prasetel Babel adalah sekumpulan plugin, yaitu detail konfigurasi ke babel-transpiler yang memerintahkan Babel untuk mentranspilasi dalam mode tertentu. Kita perlu menggunakan preset, yang memiliki lingkungan tempat kita ingin kode diubah. Misalnya, preset es2015 akan mengubah kode menjadi es5 .

Babel-Polyfills

Ada beberapa fitur seperti metode dan objek, yang tidak dapat ditransformasikan. Pada contoh seperti itu, kita dapat menggunakan babel-polyfill untuk memfasilitasi penggunaan fitur di browser apa pun. Mari kita perhatikan contoh janji; agar fitur berfungsi di browser lama, kita perlu menggunakan polyfills.

Babel-Polyfills

Babel-cli hadir dengan banyak perintah di mana kodenya dapat dengan mudah dikompilasi pada baris perintah. Ia juga memiliki fitur seperti plugin dan preset untuk digunakan bersama dengan perintah sehingga mudah untuk mentranspilasi kode sekaligus.

Keuntungan menggunakan BabelJS

Pada bagian ini, kita akan mempelajari tentang keuntungan berbeda yang terkait dengan penggunaan BabelJS -

BabelJS menyediakan kompatibilitas mundur ke semua fitur baru yang ditambahkan ke JavaScript dan dapat digunakan di browser apa pun.
BabelJS memiliki kemampuan transpile untuk mengambil JavaScript versi berikutnya - ES6, ES7, ESNext, dll.
BabelJS dapat digunakan bersama dengan gulp, webpack, flow, react, typescript, dll. Membuatnya sangat kuat dan dapat digunakan dengan proyek besar yang memudahkan hidup developer.
BabelJS juga bekerja dengan sintaks react JSX dan dapat dikompilasi dalam bentuk JSX.
BabelJS memiliki dukungan untuk plugin, polyfills, babel-cli yang memudahkan pengerjaan proyek besar.

Kekurangan menggunakan BabelJS

Di bagian ini, kita akan belajar tentang berbagai kerugian menggunakan BabelJS -

Kode BabelJS mengubah sintaks saat transpiling yang membuat kode sulit dipahami saat dirilis pada produksi.
Kode yang ditranspilasi lebih besar ukurannya jika dibandingkan dengan kode aslinya.
Tidak semua ES6 / 7/8 atau fitur baru yang akan datang dapat ditranspilasi dan kami harus menggunakan polyfill agar dapat berfungsi di browser lama.

Berikut adalah situs resmi babeljs https://babeljs.io/.