BabelJS - Các plugin Babel

BabelJS là một trình biên dịch javascript thay đổi cú pháp của mã được cung cấp dựa trên các cài đặt trước và plugin có sẵn. Quy trình biên dịch babel bao gồm 3 phần sau:

  • parsing
  • transforming
  • printing

Mã được cấp cho babel được trả lại như cũ chỉ với cú pháp được thay đổi. Chúng tôi đã thấy các giá trị đặt trước được thêm vào tệp .babelrc để biên dịch mã từ es6 sang es5 hoặc ngược lại. Cài đặt trước không là gì ngoài một tập hợp các plugin. Babel sẽ không thay đổi bất cứ điều gì nếu các cài đặt trước hoặc chi tiết bổ sung không được cung cấp trong quá trình biên dịch.

Bây giờ chúng ta hãy thảo luận về các plugin sau:

  • transform-class-properties
  • Transform-exponentiation-operator
  • For-of
  • đối tượng nghỉ ngơi và lây lan
  • async/await

Bây giờ, chúng ta sẽ tạo một thiết lập dự án và làm việc trên một số plugin, điều này sẽ giúp bạn hiểu rõ về các yêu cầu của plugin trong babel.

chỉ huy

npm init

Chúng ta phải cài đặt các gói yêu cầu cho babel - babel cli, babel core, babel-preset, v.v.

Các gói cho babel 6

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

Các gói cho babel 7

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

Tạo tệp js trong dự án của bạn và viết mã js của bạn.

Class - Transform-class-thuộc tính

Tuân thủ các mã được cung cấp dưới đây cho mục đích này -

Thí dụ

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;

Hiện tại, chúng tôi chưa cung cấp bất kỳ chi tiết cài đặt trước hoặc plugin nào cho babel. Nếu chúng ta tình cờ đọc mã bằng lệnh -

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;

Chúng tôi sẽ nhận được mã như nó vốn có. Bây giờ chúng ta hãy thêm cài đặt trước vào.babelrc tập tin.

Note - Tạo .babelrc tệp bên trong thư mục gốc của dự án của bạn.

.babelrc for babel 6

.babelrc for babel 7

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

Chúng tôi đã cài đặt các cài đặt trước; bây giờ chúng ta hãy chạy lại lệnh -

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;

Trong ES6, cú pháp lớp như sau

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;
   }
}

Có hàm tạo và tất cả các thuộc tính của lớp được định nghĩa bên trong nó. Trong trường hợp, chúng ta cần xác định các thuộc tính của lớp bên ngoài lớp mà chúng ta không thể làm như vậy.

Thí dụ

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

Nếu chúng ta tình cờ biên dịch đoạn mã trên, nó sẽ tạo ra một lỗi trong babel. Điều này dẫn đến mã không được biên dịch.

Để làm cho việc này hoạt động theo cách chúng ta muốn, chúng ta có thể sử dụng plugin babel có tên là babel-plugin-biến-lớp-thuộc tính. Để làm cho nó hoạt động, trước tiên chúng ta cần cài đặt nó như sau:

Các gói cho babel 6

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

Gói cho babel 7

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"]
}

Bây giờ, chúng ta sẽ chạy lại lệnh.

chỉ huy

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

Sau đây là kết quả mà chúng tôi nhận được khi sử dụng trong trình duyệt:

Toán tử lũy thừa - biến đổi-lũy thừa-toán tử

** là toán tử được sử dụng để tính lũy thừa trong ES7. Ví dụ sau đây cho thấy hoạt động tương tự trong ES7. Nó cũng cho thấy cách chuyển mã bằng cách sử dụng babeljs.

Thí dụ

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

Để xử lý toán tử lũy thừa, chúng ta cần cài đặt một plugin như sau:

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

Thêm chi tiết plugin vào .babelrc tập tin như sau cho babel 6 -

{
   "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

For-of

Các gói cần thiết cho các plugin trong babel6 và 7 như sau:

Babel6

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

Babel 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);
}

chỉ huy

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

đối tượng còn lại lây lan

Các gói cần thiết cho các plugin trong babel6 và 7 như sau:

Babel 6

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

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

chỉ huy

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

async / await

Chúng tôi cần các gói sau để được cài đặt cho babel 6 -

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

Các gói cho babel 7

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

chỉ huy

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

Chúng ta phải sử dụng polyfill cho giống như nó sẽ không hoạt động trong các trình duyệt không hỗ trợ các hứa hẹn.

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