BabelJS - Babel Eklentileri

BabelJS, mevcut ön ayarlar ve eklentilere göre verilen kodun sözdizimini değiştiren bir javascript derleyicisidir. Babel derlemesinin akışı aşağıdaki 3 bölümü içerir -

  • parsing
  • transforming
  • printing

Babel'e verilen kod, sadece sözdizimi değiştirilerek olduğu gibi geri verilir. Kodu es6'dan es5'e veya tam tersi şekilde derlemek için .babelrc dosyasına ön ayarların eklendiğini görmüştük. Ön ayarlar bir dizi eklentiden başka bir şey değildir. Derleme sırasında ön ayarlar veya eklenti ayrıntıları verilmezse Babel hiçbir şeyi değiştirmez.

Şimdi aşağıdaki eklentileri tartışalım -

  • transform-class-properties
  • Transform-exponentiation-operator
  • For-of
  • nesne istirahati ve yayılması
  • async/await

Şimdi, bir proje kurulumu oluşturacağız ve birkaç eklenti üzerinde çalışacağız, bu da babel'deki eklentilerin gereksinimlerinin net bir şekilde anlaşılmasını sağlayacaktır.

komut

npm init

Babel - babel cli, babel core, babel-preset vb. İçin gerekli paketleri kurmamız gerekiyor.

Babel 6 için paketler

npm install babel-cli babel-core babel-preset-es2015 --save-dev

Babel 7 için paketler

npm install @babel/cli @babel/core @babel/preset-env --save-dev

Projenizde bir js dosyası oluşturun ve js kodunuzu yazın.

Sınıflar - Sınıf özelliklerini dönüştür

Bu amaçla aşağıda verilen kodlara uyun -

Misal

main.js

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname + "-" + this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

Şu anda, babel'e herhangi bir ön ayar veya eklenti detayı vermedik. Kodu komut kullanarak aktarırsak -

npx babel main.js --out-file main_out.js

main_out.js

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname + "-" + this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

Kodu olduğu gibi alacağız. Şimdi ön ayarı ekleyelim.babelrc dosya.

Note - Oluştur .babelrc projenizin kök klasöründeki dosya.

.babelrc for babel 6

.babelrc for babel 7

{
   "presets":["@babel/env"]
}

Ön ayarları zaten kurduk; şimdi komutu tekrar çalıştıralım -

npx babel main.js --out-file main_out.js

main_out.js

"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false; 
         descriptor.configurable = true; 
         if ("value" in descriptor) descriptor.writable = true; 
         Object.defineProperty(target, descriptor.key, descriptor); 
      }
   }
   return function (Constructor, protoProps, staticProps) { 
      if (protoProps) defineProperties(Constructor.prototype, protoProps); 
      if (staticProps) defineProperties(Constructor, staticProps); 
      return Constructor; 
   }; 
}();

function _classCallCheck(instance, Constructor) { 
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function"); 
   } 
}

var Person = function () {
   function Person(fname, lname, age, address) {
      _classCallCheck(this, Person);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Person, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);
   return Person;
}();

var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

ES6'da sınıf sözdizimi aşağıdaki gibidir

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname + "-" + this.lname;
   }
}

Yapıcı vardır ve sınıfın tüm özellikleri onun içinde tanımlanmıştır. Bu durumda, sınıfın dışında sınıf özelliklerini tanımlamamız gerekir, bunu yapamayız.

Misal

class Person {
   name = "Siya Kapoor";

   fullname = () => {
      return this.name;
   }
}
var a = new Person();
var persondet = a.fullname();
console.log("%c"+persondet, "font-size:25px;color:red;");

Yukarıdaki kodu derlersek, babel'de bir hata atar. Bu, kodun derlenmemesiyle sonuçlanır.

Bunun istediğimiz şekilde çalışmasını sağlamak için babel-plugin-transform-class-properties adlı babel eklentisini kullanabiliriz. Çalışması için önce aşağıdaki gibi yüklememiz gerekir -

Babel 6 için paketler

npm install --save-dev babel-plugin-transform-class-properties

Babel 7 için paket

npm install --save-dev @babel/plugin-proposal-class-properties

Add the plugin to .babelrc file for babel 6 -

.babelrc for babel 7

{
   "plugins": ["@babel/plugin-proposal-class-properties"]
}

Şimdi komutu tekrar çalıştıracağız.

komut

npx babel main.js --out-file main_out.js

main.js

class Person {
   name = "Siya Kapoor";

   fullname = () => {
      return this.name;
   }
}
var a = new Person();
var persondet = a.fullname();
console.log("%c"+persondet, "font-size:25px;color:red;");

Compiled to main_out.js

class Person {
   constructor() {
      this.name = "Siya Kapoor";

      this.fullname = () => {
         return this.name;
      };
   }
}
var a = new Person();
var persondet = a.fullname();
console.log("%c"+persondet, "font-size:25px;color:red;");

Output

Bir tarayıcıda kullanıldığında elde ettiğimiz çıktı aşağıdadır -

Üsleme Operatörü - dönüştürme-üs alma-operatörü

** ES7'de üs alma için kullanılan operatördür. Aşağıdaki örnek ES7'de nasıl çalıştığını göstermektedir. Ayrıca babeljs kullanarak kodun nasıl aktarılacağını da gösterir.

Misal

let sqr = 9 ** 2;
console.log("%c"+sqr, "font-size:25px;color:red;");

Üs alma operatörünü aktarmak için aşağıdaki gibi yüklenecek bir eklentiye ihtiyacımız var -

Packages for babel 6

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

Packages for babel 7

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

Eklenti ayrıntılarını şuraya ekleyin: .babelrc babel 6 için aşağıdaki dosya -

{
   "plugins": ["transform-exponentiation-operator"]
}

.babelrc for babel 7

{
   "plugins": ["@babel/plugin-transform-exponentiation-operator"]
}

command

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

exponeniation_out.js

let sqr = Math.pow(9, 2);
console.log("%c" + sqr, "font-size:25px;color:red;");

Output

İçin

Babel6 ve 7'deki eklentiler için gerekli paketler aşağıdaki gibidir -

Babel6

npm install --save-dev babel-plugin-transform-es2015-for-of

Babil 7

npm install --save-dev @babel/plugin-transform-for-of

.babelrc for babel6

{
   "plugins": ["transform-es2015-for-of"]
}

.babelrc for babel7

{
   "plugins": ["@babel/plugin-transform-for-of"]
}

forof.js

let foo = ["PHP", "C++", "Mysql", "JAVA"];
for (var i of foo) {
   console.log(i);
}

komut

npx babel forof.js --out-file forof_es5.js

Forof_es5.js

let foo = ["PHP", "C++", "Mysql", "JAVA"];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
   for (var _iterator = foo[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var i = _step.value;

      console.log(i);
   }
} catch (err) {
   _didIteratorError = true;
   _iteratorError = err;
} finally {
   try {
      if (!_iteratorNormalCompletion && _iterator.return) {
         _iterator.return();
      }
   } finally {
      if (_didIteratorError) {
         throw _iteratorError;
      }
   }
}

Output

nesne istirahati yayıldı

Babel6 ve 7'deki eklentiler için gerekli paketler aşağıdaki gibidir -

Babil 6

npm install --save-dev babel-plugin-transform-object-rest-spread

Babil 7

npm install --save-dev @babel/plugin-proposal-object-rest-spread

.babelrc for babel6

{
   "plugins": ["transform-object-rest-spread"]
}

.babelrc for babel7

{
   "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

o.js

let { x1, y1, ...z1 } = { x1: 11, y1: 12, a: 23, b: 24 };
console.log(x1);
console.log(y1);
console.log(z1);

let n = { x1, y1, ...z1};
console.log(n);

komut

npx babel o.js --out-file o_es5.js

o_es5.js

var _extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i]; for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key]; 
         } 
      } 
   } 
   return target; 
};

function _objectWithoutProperties(obj, keys) {
   var target = {};
   for (var i in obj) {
      if (keys.indexOf(i) >= 0) continue;
      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
      target[i] = obj[i];
   }
   return target;
}

let _x1$y1$a$b = { x1: 11, y1: 12, a: 23, b: 24 },
   { x1, y1 } = _x1$y1$a$b,
   z1 = _objectWithoutProperties(_x1$y1$a$b, ["x1", "y1"]);
console.log(x1);
console.log(y1);
console.log(z1);

let n = _extends({ x1, y1 }, z1);
console.log(n);

Output

eşzamansız / bekleyin

Babel 6 için aşağıdaki paketlerin yüklenmesine ihtiyacımız var -

npm install --save-dev babel-plugin-transform-async-to-generator

Babel 7 için paketler

npm install --save-dev @babel/plugin-transform-async-to-generator

.babelrc for babel 6

{
   "plugins": ["transform-async-to-generator"]
}

.babelrc for babel 7

{
   "plugins": ["@babel/plugin-transform-async-to-generator"]
}

async.js

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 async.js --out-file async_es5.js

async_es5.js

function _asyncToGenerator(fn) {
   return function () {
      var gen = fn.apply(this, arguments);
      return new Promise(function (resolve, reject) {
         function step(key, arg) {
            try {
               var info = gen[key](arg);
               var value = info.value; 
            } catch (error) {
               reject(error);
               return; 
            } if (info.done) {
               resolve(value); 
            } else {
               return Promise.resolve(value).then(function (value) {
                  step("next", value);
               },
               function (err) {
                  step("throw", err); }); 
            }
         } return step("next"); 
      });
   };
}

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

   return function out() {
      return _ref.apply(this, arguments);
   };
})();
out();

Vaatlerin desteklenmediği tarayıcılarda çalışmayacağı gibi polyfill'i de kullanmalıyız.

Output

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved