Introdução ao Babel
O Babel é uma ferramenta que realiza a transpilação do código JavaScript moderno (ES6/ES7 e superiores) para versões mais antigas compatíveis com a maioria dos navegadores.
Nota
As etapas de instalação e configuração estão descritas na nota: Configuração do Babel.
Isso garante que o código escrito usando as últimas características da linguagem possa ser executado em ambientes que não suportam nativamente essas funcionalidades.
Exemplo
Código fonte
class Pessoa {
constructor(nome, sobrenome) {
this.nome = nome;
this.sobrenome = sobrenome;
}
}Código transpilado
"use strict";
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Pessoa = /*#__PURE__*/_createClass(function Pessoa(nome, sobrenome) {
_classCallCheck(this, Pessoa);
this.nome = nome;
this.sobrenome = sobrenome;
});Utilização do Babel para criação de bundle
Em ambiente de produção, será utilizado o código gerado pelo Babel (bundle.js), afim dar suporte a todos os navegadores:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>