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>

Resultado