BabelJS - Babel Polyfill

Babel Polyfill aggiunge il supporto ai browser Web per le funzionalità, che non sono disponibili. Babel compila il codice dalla recente versione di ecma a quella che vogliamo. Cambia la sintassi secondo il preset, ma non può fare nulla per gli oggetti o metodi utilizzati. Dobbiamo usare polyfill per queste funzionalità per la compatibilità con le versioni precedenti.

Caratteristiche che possono essere polyfilled

Di seguito è riportato l'elenco delle funzionalità che richiedono il supporto del polyfill se utilizzate nei browser meno recenti:

  • Promises
  • Map
  • Set
  • Symbol
  • Weakmap
  • Weakset
  • Array.from, Array.includes, Array.of, Array # find, Array.buffer, Array # findIndex
  • Object.assign, Object.entries, Object.values

Creeremo il setup del progetto e vedremo anche il funzionamento di babel polyfill.

comando

npm init

Ora installeremo i pacchetti richiesti per babel.

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

Ecco il pacchetto finale.json -

Aggiungeremo anche es2015 ai preset, poiché vogliamo compilare il codice in es5.

.babelrc for babel 6

.babelrc for babel 7

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

Installeremo un servizio leggero in modo da poter testare il nostro codice nel browser -

npm install --save-dev lite-server

Aggiungiamo il comando babel per compilare il nostro codice in package.json -

Abbiamo anche aggiunto il comando build che chiama lite-server.

Babel-polyfill viene installato insieme al pacchetto babel-core. Babel-polyfill sarà disponibile nei moduli del nodo come mostrato di seguito -

Lavoreremo ulteriormente sulle promesse e useremo babel-polyfill insieme ad esso.

ES6 - Promesse

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log("%c"+msg, "font-size:25px;color:red;");
});

comando

npx babel promise.js --out-file promise_es5.js

BabelJS - ES5

"use strict";

var timingpromise = new Promise(function (resolve, reject) {
   setTimeout(function () {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then(function (msg) {
   console.log("%c"+msg, "font-size:25px;color:red;");
});

La compilazione non deve cambiare nulla. Il codice della promessa è stato trascritto così com'è. Ma i browser che non supportano le promesse genereranno un errore anche se abbiamo compilato il codice in es5.

Per risolvere questo problema, dobbiamo aggiungere polyfill insieme al codice finale compilato es5. Per eseguire il codice nel browser, prenderemo il file babel-polyfill dai moduli del nodo e lo aggiungeremo al file .html in cui vogliamo utilizzare le promesse come mostrato di seguito -

index.html

<html>
   <head>
   </head>
   <body>
      <h1>Babel Polyfill Testing</h1>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="promise_es5.js"></script>
   </body>
</html>

produzione

Nel file index.html, abbiamo utilizzato il file polyfill.min.js da node_modules seguito da promise_es5.js -

<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>

<script type="text/javascript" src="promise_es5.js"></script>

Note - Il file Polyfill deve essere utilizzato all'inizio prima della chiamata javascript principale.

Imbottitura delle corde

Il riempimento delle stringhe aggiunge un'altra stringa dal lato sinistro in base alla lunghezza specificata. La sintassi per il riempimento delle stringhe è come mostrato di seguito:

Sintassi

str.padStart(length, string);
str.padEnd(length, string);

Esempio

const str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

Produzione

_____abc
abc_____

Babel - ES5

npx babel strpad.js --out-file strpad_es5.js

comando

'use strict';

var str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

Il js deve essere usato insieme a babel-polyfill come mostrato di seguito -

test.html

<!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="strpad_es5.js"></script>
   </body>
</html>

Map, Set, WeakSet, WeakMap

In questa sezione, impareremoMap, Set, WeakSet, WeakMap.

  • Map è un oggetto con coppia chiave / valore.

  • Set è anche un oggetto ma con valori univoci.

  • WeakMap and WeakSet iare anche oggetti con coppie chiave / valore.

Map, Set, WeakMap e WeakSet sono nuove funzionalità aggiunte a ES6. Per trasferirlo in modo che possa essere utilizzato nei browser meno recenti, è necessario utilizzare polyfill. Lavoreremo su un esempio e utilizzeremo polyfill per compilare il codice.

Esempio

let m = new Map(); //map example
m.set("0","A");
m.set("1","B");
console.log(m);

let set = new Set(); //set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);

let ws = new WeakSet(); //weakset example
let x = {};
let y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));

let wm = new WeakMap(); //weakmap example
let a = {};
wm.set(a, "hello");
console.log(wm.get(a));

Produzione

Map(2) {"0" => "A", "1" => "B"}
Set(2) {"A", "B"}
true
false
hello

comando

npx babel set.js --out-file set_es5.js

Babel-ES5

"use strict";

var m = new Map(); //map example
m.set("0", "A");
m.set("1", "B");
console.log(m);

var set = new Set(); //set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);

var ws = new WeakSet(); //weakset example
var x = {};
var y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));

var wm = new WeakMap(); //weakmap example
var a = {};
wm.set(a, "hello");
console.log(wm.get(a));

Il js deve essere usato insieme a babel-polyfill come mostrato di seguito -

test.html

<!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="set_es5.js"></script>
   </body>
</html>

Produzione

Metodi di matrice

Molte proprietà e metodi possono essere usati su array; ad esempio, array.from, array.includes, ecc.

Consideriamo di lavorare sul seguente esempio per capirlo meglio.

Esempio

arraymethods.js

var arrNum = [1, 2, 3];

console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], x => x + x));

Output

true
[6, 8, 10]

comando

npx babel arraymethods.js --out-file arraymethods_es5.js

Babel-es5

"use strict";

var arrNum = [1, 2, 3];

console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], function (x) {
return x + x;
}));

I metodi utilizzati sull'array vengono stampati così come sono. Per farli funzionare su browser meno recenti, dobbiamo aggiungere il file polyfill all'inizio come mostrato di seguito -

index.html

<html>
   <head></head>
   <body>
      <h1>Babel Polyfill Testing</h1>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="arraymethods_es5.js"></script>
   </body>
</html>

Produzione