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
