BabelJS - Babel Polyfill

Babel Polyfill agrega compatibilidad con los navegadores web para funciones que no están disponibles. Babel compila el código de la versión reciente de ecma a la que queremos. Cambia la sintaxis según el preset, pero no puede hacer nada por los objetos o métodos utilizados. Tenemos que usar polyfill para esas características para compatibilidad con versiones anteriores.

Características que se pueden polirrellenar

A continuación se muestra la lista de funciones que necesitan compatibilidad con polyfill cuando se utilizan en navegadores más antiguos:

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

Crearemos la configuración del proyecto y también veremos el funcionamiento de babel polyfill.

mando

npm init

Ahora instalaremos los paquetes necesarios para babel.

Paquetes para babel 6

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

Paquetes para babel 7

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

Aquí está el package.json final:

También agregaremos es2015 a los ajustes preestablecidos, ya que queremos compilar el código en es5.

.babelrc for babel 6

.babelrc for babel 7

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

Instalaremos un servidor ligero para que podamos probar nuestro código en el navegador.

npm install --save-dev lite-server

Agreguemos el comando babel para compilar nuestro código en package.json -

También hemos agregado el comando build que llama al servidor lite.

Babel-polyfill se instala junto con el paquete babel-core. El babel-polyfill estará disponible en módulos de nodo como se muestra a continuación:

Seguiremos trabajando en las promesas y usaremos babel-polyfill junto con él.

ES6 - Promesas

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

mando

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 compilación no necesita cambiar nada. El código de la promesa se ha transpilado tal cual. Pero los navegadores que no admiten promesas arrojarán un error aunque hayamos compilado el código en es5.

Para resolver este problema, necesitamos agregar polyfill junto con el código compilado final de es5. Para ejecutar el código en el navegador, tomaremos el archivo babel-polyfill de los módulos de nodo y lo agregaremos al archivo .html donde queremos usar promesas como se muestra a continuación:

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>

salida

En el archivo index.html, hemos utilizado el archivo polyfill.min.js de node_modules seguido 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 - El archivo Polyfill debe usarse al principio antes de la llamada principal de JavaScript.

Acolchado de cuerdas

El relleno de cadena agrega otra cadena desde el lado izquierdo según la longitud especificada. La sintaxis para el relleno de cadenas es la que se muestra a continuación:

Sintaxis

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

Ejemplo

const str = 'abc';

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

Salida

_____abc
abc_____

Babel - ES5

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

mando

'use strict';

var str = 'abc';

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

El js debe usarse junto con babel-polyfill como se muestra a continuación:

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>

Mapa, conjunto, conjunto débil, mapa débil

En esta sección, aprenderemos sobreMap, Set, WeakSet, WeakMap.

  • Map es un objeto con un par clave / valor.

  • Set también es un objeto pero con valores únicos.

  • WeakMap and WeakSet También hay objetos con pares clave / valor.

Map, Set, WeakMap y WeakSet son nuevas funciones agregadas a ES6. Para transpilarlo y usarlo en navegadores más antiguos, necesitamos hacer uso de polyfill. Trabajaremos en un ejemplo y usaremos polyfill para compilar el código.

Ejemplo

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

Salida

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

mando

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

El js debe usarse junto con babel-polyfill como se muestra a continuación:

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>

Salida

Métodos de matriz

Se pueden utilizar muchas propiedades y métodos en una matriz; por ejemplo, array.from, array.includes, etc.

Consideremos trabajar en el siguiente ejemplo para comprender esto mejor.

Ejemplo

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]

mando

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

Los métodos utilizados en la matriz se imprimen como están. Para que funcionen en navegadores más antiguos, debemos agregar el archivo polyfill al principio, como se muestra a continuación:

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>

Salida