BabelJS - Plugin Babel

BabelJS è un compilatore javascript che modifica la sintassi del codice fornito in base ai preset e ai plugin disponibili. Il flusso della compilazione di babele comprende le seguenti 3 parti:

parsing
transforming
printing

Il codice dato a babel viene restituito così com'è con solo la sintassi modificata. Abbiamo già visto l'aggiunta di preset al file .babelrc per compilare codice da es6 a es5 o viceversa. I preset non sono altro che un insieme di plugin. Babel non cambierà nulla se i dettagli dei preset o dei plug-in non vengono forniti durante la compilazione.

Parliamo ora dei seguenti plugin:

transform-class-properties
Transform-exponentiation-operator
For-of
oggetto di riposo e diffusione
async/await

Ora creeremo una configurazione del progetto e lavoreremo su pochi plugin, che forniranno una chiara comprensione dei requisiti dei plugin in babel.

comando

npm init

Dobbiamo installare i pacchetti richiesti per babel: babel cli, babel core, babel-preset, ecc.

Pacchetti per babele 6

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

Pacchetti per babele 7

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

Crea un file js nel tuo progetto e scrivi il tuo codice js.

Classi: proprietà della classe di trasformazione

Rispettare i codici riportati di seguito per questo scopo:

Esempio

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;

Al momento, non abbiamo fornito a babel alcun dettaglio di preset o plug-in. Se ci capita di trasferire il codice usando il comando -

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;

Otterremo il codice così com'è. Aggiungiamo ora il preset a.babelrc file.

Note - Crea .babelrc file all'interno della cartella principale del progetto.

.babelrc for babel 6

.babelrc for babel 7

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

Abbiamo già installato i preset; ora eseguiamo di nuovo il comando -

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;

In ES6, la sintassi della classe è la seguente

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'è un costruttore e tutte le proprietà della classe sono definite al suo interno. In tal caso, dobbiamo definire le proprietà della classe al di fuori della classe, non possiamo farlo.

Esempio

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

Se ci capita di compilare il codice sopra, verrà generato un errore in babel. In questo modo il codice non viene compilato.

Per fare in modo che funzioni come vogliamo, possiamo utilizzare il plugin babel chiamato babel-plugin-transform-class-properties. Per farlo funzionare, dobbiamo prima installarlo come segue:

Pacchetti per babele 6

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

Pacchetto per babele 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"]
}

Ora eseguiremo nuovamente il comando.

comando

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

Di seguito è riportato l'output che otteniamo quando utilizzato in un browser:

Operatore di esponenziazione: operatore di trasformazione a esponenziazione

** è l'operatore utilizzato per l'elevamento a potenza in ES7. L'esempio seguente mostra il funzionamento dello stesso in ES7. Mostra anche come trasferire il codice usando babeljs.

Esempio

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

Per trasferire l'operatore di esponenziazione, abbiamo bisogno di un plugin da installare come segue:

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

Aggiungi i dettagli del plug-in a .babelrc file come segue per babele 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

Per-di

I pacchetti richiesti per i plugin in babel6 e 7 sono i seguenti:

Babel6

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

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

comando

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

oggetto resto diffuso

I pacchetti richiesti per i plugin in babel6 e 7 sono i seguenti:

Babele 6

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

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

comando

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

asincrono / attendono

Abbiamo bisogno dei seguenti pacchetti da installare per babel 6 -

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

Pacchetti per babele 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();

comando

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

Dobbiamo utilizzare il polyfill per lo stesso in quanto non funzionerà nei browser in cui le promesse non sono supportate.

Output

↰ Previous page Next page ↱

BabelJS - Plugin Babel

comando

Pacchetti per babele 6

Pacchetti per babele 7

Classi: proprietà della classe di trasformazione

Esempio

Esempio

Pacchetti per babele 6

Pacchetto per babele 7

comando

Operatore di esponenziazione: operatore di trasformazione a esponenziazione

Esempio

Per-di

Babel6

Babele 7

comando

oggetto resto diffuso

Babele 6

Babele 7

comando

asincrono / attendono

Pacchetti per babele 7

comando

Tutorial BabelJs