BabelJS - Execução de Código ES6
BabelJSé um transpiler JavaScript, que converte novos recursos adicionados ao JavaScript em ES5 ou para reagir com base na predefinição ou plug-in fornecido. ES5 é uma das formas mais antigas de JavaScript e é compatível com a execução em navegadores novos e antigos sem problemas. Na maioria dos exemplos neste tutorial, nós transpilamos o código para ES5.
Vimos muitos recursos como funções de seta, classes, promessas, geradores, funções assíncronas, etc. adicionados ao ES6, ES7 e ES8. Quando qualquer um dos recursos recém-adicionados é usado em navegadores antigos, ocorrem erros. O BabelJS ajuda a compilar o código, que é compatível com os navegadores mais antigos. Vimos que o ES5 funciona perfeitamente bem em navegadores mais antigos sem problemas. Portanto, considerando os detalhes do ambiente do projeto, se for necessário rodar em navegadores mais antigos, podemos usar qualquer novo recurso em nosso projeto e compilar o código para ES5 usando babeljs e usá-lo em qualquer navegador sem problemas.
Vamos considerar o seguinte exemplo para entender isso.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>arquivo index.js
var _foo = () => {
return "Hello World"
};
alert(_foo());Resultado
Quando executamos o html acima no navegador Chrome, obtemos a seguinte saída -
Quando o HTML é executado no Firefox, ele gera a seguinte saída -
E quando o mesmo HTML é executado no Internet Explorer, ele gera o seguinte erro de sintaxe -
Usamos a função de seta ES6; o mesmo não funciona em todos os navegadores conforme visto acima. Para fazer isso funcionar, temos o BabelJS para compilar o código para ES5 e usá-lo em todos os navegadores.
Irá compilar o arquivo js para es5 usando babeljs e verificar novamente nos navegadores.
No arquivo html, usaremos index_new.js conforme mostrado abaixo -
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index_new.js"></script>
</body>
</html>index_new.js
"use strict";
var _foo = function _foo() {
return "Hello World";
};
alert(_foo());Saída Chrome
Saída do navegador Firefox
Saída do navegador IE
