BabelJS - Babel Polyfill

Babel Polyfill ajoute la prise en charge des navigateurs Web pour des fonctionnalités qui ne sont pas disponibles. Babel compile le code de la version récente d'ecma à celle que nous voulons. Il modifie la syntaxe selon le préréglage, mais ne peut rien faire pour les objets ou méthodes utilisés. Nous devons utiliser polyfill pour ces fonctionnalités pour une compatibilité descendante.

Caractéristiques qui peuvent être polyfilled

Voici la liste des fonctionnalités qui nécessitent la prise en charge de polyfill lorsqu'elles sont utilisées dans les navigateurs plus anciens -

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

Nous créerons la configuration du projet et verrons également le fonctionnement de babel polyfill.

commander

npm init

Nous allons maintenant installer les packages requis pour babel.

Forfaits pour babel 6

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

Forfaits pour babel 7

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

Voici le package final.json -

Nous ajouterons également es2015 aux préréglages, car nous voulons compiler le code en es5.

.babelrc for babel 6

.babelrc for babel 7

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

Nous allons installer un service léger afin de pouvoir tester notre code dans le navigateur -

npm install --save-dev lite-server

Ajoutons la commande babel pour compiler notre code dans package.json -

Nous avons également ajouté la commande build qui appelle le serveur lite.

Babel-polyfill est installé avec le paquet babel-core. Le babel-polyfill sera disponible dans les modules de nœuds comme indiqué ci-dessous -

Nous continuerons à travailler sur les promesses et utiliserons babel-polyfill avec lui.

ES6 - Promesses

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

commander

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 compilation n'a rien à changer. Le code de la promesse a été transpilé tel quel. Mais les navigateurs qui ne prennent pas en charge les promesses généreront une erreur même si nous avons compilé le code en es5.

Pour résoudre ce problème, nous devons ajouter polyfill avec le code final compilé es5. Pour exécuter le code dans le navigateur, nous allons prendre le fichier babel-polyfill des modules de nœuds et l'ajouter au fichier .html où nous voulons utiliser les promesses comme indiqué ci-dessous -

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>

production

Dans le fichier index.html, nous avons utilisé le fichier polyfill.min.js de node_modules suivi de 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 - Le fichier Polyfill doit être utilisé au début avant l'appel javascript principal.

Rembourrage de cordes

Le remplissage de chaîne ajoute une autre chaîne du côté gauche selon la longueur spécifiée. La syntaxe du remplissage de chaîne est la suivante:

Syntaxe

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

Exemple

const str = 'abc';

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

Production

_____abc
abc_____

Babel - ES5

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

commander

'use strict';

var str = 'abc';

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

Le js doit être utilisé avec babel-polyfill comme indiqué ci-dessous -

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>

Carte, Ensemble, WeakSet, WeakMap

Dans cette section, nous découvrironsMap, Set, WeakSet, WeakMap.

  • Map est un objet avec une paire clé / valeur.

  • Set est aussi un objet mais avec des valeurs uniques.

  • WeakMap and WeakSet iare également des objets avec des paires clé / valeur.

Map, Set, WeakMap et WeakSet sont de nouvelles fonctionnalités ajoutées à ES6. Pour le transpiler pour être utilisé dans les anciens navigateurs, nous devons utiliser polyfill. Nous allons travailler sur un exemple et utiliser polyfill pour compiler le code.

Exemple

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

Production

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

commander

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

Le js doit être utilisé avec babel-polyfill comme indiqué ci-dessous -

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>

Production

Méthodes de tableau

De nombreuses propriétés et méthodes peuvent être utilisées sur un tableau; par exemple, array.from, array.includes, etc.

Pensons à travailler sur l'exemple suivant pour mieux comprendre cela.

Exemple

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]

commander

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

Les méthodes utilisées sur la matrice sont imprimées telles quelles. Pour les faire fonctionner sur les navigateurs plus anciens, nous devons ajouter un fichier polyfill au début comme indiqué ci-dessous -

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>

Production