BabelJS - Transpile ES7 fitur ke ES5

Dalam bab ini, kita akan mempelajari cara memindahkan fitur ES7 ke ES5.

ECMA Script 7 memiliki fitur baru berikut yang ditambahkan ke dalamnya -

Async-Await
Operator Eksponensial
Array.prototype.includes()

Kami akan mengkompilasinya ke ES5 menggunakan babeljs. Bergantung pada persyaratan proyek Anda, kode juga dapat dikompilasi dalam versi ecma apa pun, misalnya ES7 hingga ES6 atau ES7 hingga ES5. Karena versi ES5 adalah yang paling stabil dan berfungsi dengan baik di semua browser modern dan lama, kami akan mengkompilasi kode ke ES5.

Async-Await

Async adalah fungsi asinkron, yang mengembalikan janji implisit. Janji itu diselesaikan atau ditolak. Fungsi Async sama dengan fungsi standar normal. Fungsi tersebut dapat memiliki ekspresi menunggu yang menjeda eksekusi hingga mengembalikan sebuah promise dan setelah mendapatkannya, eksekusi dilanjutkan. Await hanya akan berfungsi jika fungsinya asinkron.

Berikut adalah contoh kerja async dan await.

Contoh

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

Keluaran

Promise resolved after 5 seconds
hello after await

Ekspresi await ditambahkan sebelum fungsi timer dipanggil. Fungsi pengatur waktu akan mengembalikan janji setelah 5 detik. Jadi menunggu akan menghentikan eksekusi sampai janji pada fungsi pengatur waktu diselesaikan atau ditolak dan kemudian dilanjutkan.

Sekarang mari kita transpile kode di atas ke ES5 menggunakan babel.

ES7 - Async-Await

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

perintah

npx babel asyncawait.js --out-file asyncawait_es5.js

BabelJS - ES5

"use strict";

var timer = function timer() {
   return new Promise(function (resolve) {
      setTimeout(function () {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
var out = async function out() {
   var msg = await timer();
   console.log(msg);
   console.log("hello after await");
};

out();

Babeljs tidak mengkompilasi objek atau metode; jadi di sini janji yang digunakan tidak akan ditransformasikan dan akan ditampilkan sebagaimana adanya. Untuk mendukung promise di browser lama, kita perlu menambahkan kode, yang akan memiliki dukungan untuk promise. Untuk saat ini, mari kita instal babel-polyfill sebagai berikut -

npm install --save babel-polyfill

Ini harus disimpan sebagai ketergantungan dan bukan ketergantungan-dev.

Untuk menjalankan kode di browser, kita akan menggunakan file polyfill dari node_modules \ babel-polyfill \ dist \ polyfill.min.js dan memanggilnya menggunakan tag script seperti yang ditunjukkan di bawah ini -

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="aynscawait_es5.js"></script>
   </body>
</html>

Saat Anda menjalankan halaman pengujian di atas, Anda akan melihat output di konsol seperti yang ditunjukkan di bawah ini

Operator Eksponensial

** adalah operator yang digunakan untuk eksponen di ES7. Contoh berikut menunjukkan cara kerja yang sama di ES7 dan kode ditranspilasi menggunakan babeljs.

Contoh

let sqr = 9 ** 2;
console.log(sqr);

Keluaran

ES6 - Eksponensial

let sqr = 9 ** 2;
console.log(sqr);

Untuk mentranspilasi operator eksponen, kita perlu menginstal plugin untuk diinstal sebagai berikut -

perintah

npm install --save-dev babel-plugin-transform-exponentiation-operator

Tambahkan detail plugin ke .babelrc mengajukan sebagai berikut -

{
   "presets":[
      "es2015"
   ],
   "plugins": ["transform-exponentiation-operator"]
}

perintah

npx babel exponeniation.js --out-file exponeniation_es5.js

BabelJS - ES5

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

Array.prototype.includes ()

Fitur ini memberikan nilai true jika elemen yang diteruskan ada di array dan false jika sebaliknya.

Contoh

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

Keluaran

true
true
false

Kita harus menggunakan babel-polyfill lagi di sini sebagai includesadalah metode pada larik dan tidak akan ditranspilasi. Kami membutuhkan langkah tambahan untuk menyertakan polyfill agar dapat berfungsi di browser lama.

ES6 - array.includes

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

perintah

npx babel array_include.js --out-file array_include_es5.js

Babel-ES5

'use strict';

var arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
var names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

Untuk mengujinya di browser lama, kita perlu menggunakan polyfill seperti yang ditunjukkan di bawah ini -

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="array_include_es5.js"></script>
   </body>
</html>

Keluaran