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>