BabelJS - Babel Polyfill
O Babel Polyfill adiciona suporte aos navegadores da web para recursos que não estão disponíveis. O Babel compila o código da versão ecma recente para a que queremos. Ele muda a sintaxe de acordo com a predefinição, mas não pode fazer nada para os objetos ou métodos usados. Temos que usar polyfill para esses recursos para compatibilidade com versões anteriores.
Recursos que podem ser polyfilled
A seguir está a lista de recursos que precisam de suporte a polyfill quando usados em navegadores mais antigos -
- Promises
- Map
- Set
- Symbol
- Weakmap
- Weakset
- Array.from, Array.includes, Array.of, Array # find, Array.buffer, Array # findIndex
- Object.assign, Object.entries, Object.values
Vamos criar a configuração do projeto e também ver o funcionamento do babel polyfill.
comando
npm init
Iremos agora instalar os pacotes necessários para o babel.
Pacotes para babel 6
npm install babel-cli babel-core babel-preset-es2015 --save-dev
Pacotes para babel 7
npm install @babel/cli @babel/core @babel/preset-env --save-dev
Aqui está o package.json final -
Também adicionaremos es2015 às predefinições, pois queremos compilar o código para es5.
.babelrc for babel 6
.babelrc for babel 7
{
"presets":["@babel/env"]
}
Vamos instalar um serviço leve para que possamos testar nosso código no navegador -
npm install --save-dev lite-server
Vamos adicionar o comando babel para compilar nosso código em package.json -
Também adicionamos o comando build que chama o lite-server.
O Babel-polyfill é instalado junto com o pacote babel-core. O babel-polyfill estará disponível em módulos de nó conforme mostrado abaixo -
Continuaremos a trabalhar em promessas e usaremos o babel-polyfill junto com ele.
ES6 - Promessas
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;");
});
A compilação não precisa mudar nada. O código da promessa foi transpilado como está. Mas os navegadores que não oferecem suporte a promessas apresentarão um erro, embora tenhamos compilado o código para es5.
Para resolver esse problema, precisamos adicionar polyfill junto com o código compilado final do es5. Para executar o código no navegador, pegaremos o arquivo babel-polyfill dos módulos de nó e adicioná-lo ao arquivo .html onde queremos usar as promessas conforme mostrado abaixo -
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>
resultado
No arquivo index.html, usamos o arquivo polyfill.min.js de node_modules seguido por promessa_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 - O arquivo Polyfill deve ser usado no início, antes da chamada javascript principal.
Preenchimento de cordas
O preenchimento da string adiciona outra string do lado esquerdo de acordo com o comprimento especificado. A sintaxe para preenchimento de string é mostrada abaixo -
Sintaxe
str.padStart(length, string);
str.padEnd(length, string);
Exemplo
const str = 'abc';
console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));
Resultado
_____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, '_'));
O js deve ser usado junto com o babel-polyfill conforme mostrado abaixo -
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
Nesta seção, aprenderemos sobreMap, Set, WeakSet, WeakMap.
Map é um objeto com par chave / valor.
Set também é um objeto, mas com valores únicos.
WeakMap and WeakSet também são objetos com pares de chave / valor.
Map, Set, WeakMap e WeakSet são novos recursos adicionados ao ES6. Para transpilar para ser usado em navegadores mais antigos, precisamos fazer uso de polyfill. Vamos trabalhar em um exemplo e usar polyfill para compilar o código.
Exemplo
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));
Resultado
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));
O js deve ser usado junto com o babel-polyfill conforme mostrado abaixo -
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>
Resultado
Métodos Array
Muitas propriedades e métodos podem ser usados na matriz; por exemplo, array.from, array.includes, etc.
Vamos trabalhar no exemplo a seguir para entender isso melhor.
Exemplo
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;
}));
Os métodos usados na matriz são impressos como estão. Para fazê-los funcionar em navegadores mais antigos, precisamos adicionar o arquivo polyfill no início, conforme mostrado abaixo -
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>