BabelJS - ES5'e Transpile ES7 özellikleri

Bu bölümde, ES7 özelliklerinin ES5'e nasıl aktarılacağını öğreneceğiz.

ECMA Script 7, kendisine eklenen aşağıdaki yeni özelliklere sahiptir -

Async-Await
Üsleme Operatörü
Array.prototype.includes()

Babeljs kullanarak bunları ES5'e derleyeceğiz. Proje gereksinimlerinize bağlı olarak, kodu herhangi bir ecma sürümünde, yani ES7'den ES6'ya veya ES7'den ES5'e derlemek de mümkündür. ES5 sürümü en kararlı olduğundan ve tüm modern ve eski tarayıcılarda iyi çalıştığından, kodu ES5'e derleyeceğiz.

Async-Bekleme

Async, örtük bir vaat döndüren zaman uyumsuz bir işlevdir. Söz ya çözüldü ya da reddedildi. Zaman uyumsuz işlev, normal standart işlevle aynıdır. İşlev, bir söz verene kadar yürütmeyi duraklatan bir ifadeyi bekleyebilir ve bir kez aldığında yürütme devam eder. Await, yalnızca işlev eşzamansız ise çalışacaktır.

İşte async ve await üzerinde çalışan bir örnek.

Misal

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();

Çıktı

Promise resolved after 5 seconds
hello after await

Await ifadesi timer işlevi çağrılmadan önce eklenir. Zamanlayıcı işlevi 5 saniye sonra sözünü geri verecektir. Bu yüzden, await, zamanlayıcı işleviyle ilgili taahhüt çözülene veya reddedilene ve daha sonra devam edene kadar yürütmeyi durduracaktır.

Şimdi yukarıdaki kodu babel kullanarak ES5'e aktaralım.

ES7 - Eşzamansız-Bekleme

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();

komut

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 nesneyi veya yöntemleri derlemez; bu nedenle burada kullanılan sözler aktarılmayacak ve olduğu gibi gösterilecektir. Eski tarayıcılardaki vaatleri desteklemek için vaatleri destekleyecek kod eklememiz gerekiyor. Şimdilik babel-polyfill'i aşağıdaki gibi kuralım -

npm install --save babel-polyfill

Dev-bağımlılık değil bir bağımlılık olarak kaydedilmelidir.

Kodu tarayıcıda çalıştırmak için, node_modules \ babel-polyfill \ dist \ polyfill.min.js'deki polyfill dosyasını kullanacağız ve aşağıda gösterildiği gibi komut dosyası etiketini kullanarak onu çağıracağız -

<!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>

Yukarıdaki test sayfasını çalıştırdığınızda, çıktıyı konsolda aşağıda gösterildiği gibi göreceksiniz.

Üsleme Operatörü

** ES7'de üs alma için kullanılan operatördür. Aşağıdaki örnek aynı şeyin ES7'de çalışmasını gösterir ve kod babeljs kullanılarak aktarılır.

Misal

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

Çıktı

ES6 - Üs alma

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

Üs alma operatörünü aktarmak için aşağıdaki gibi kurulacak bir eklenti kurmamız gerekiyor -

komut

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

Eklenti ayrıntılarını şuraya ekleyin: .babelrc aşağıdaki gibi dosya -

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

komut

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 ()

Bu özellik, kendisine iletilen öğe dizide mevcutsa true, aksi takdirde false verir.

Misal

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'));

Çıktı

true
true
false

Babel-polyfill'i burada tekrar kullanmalıyız. includesbir dizi üzerinde bir yöntemdir ve aktarılmayacaktır. Eski tarayıcılarda çalışmasını sağlamak için polyfill'i dahil etmek için ek adımlara ihtiyacımız var.

ES6 - dizi. İçerir

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'));

komut

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'));

Eski tarayıcıda test etmek için aşağıda gösterildiği gibi polyfill kullanmamız gerekir -

<!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>

Çıktı