
JavaScript é uma linguagem que está evoluindo muito rapidamente e às vezes queremos usar seus recursos mais recentes, mas se nosso navegador ou ambiente não permitir isso diretamente, teremos que transpilá-lo para que o faça.
Transpilar é a transformação do código-fonte escrito em uma linguagem em outra linguagem com um nível comparável de abstração. Portanto, no caso do JavaScript, o transpiler pega uma sintaxe que os navegadores mais antigos não entendem e a transforma em uma sintaxe que eles entendem.
Polyfilling vs. Transpilar
Ambos os métodos funcionam com o mesmo propósito: podemos escrever código que usa novos recursos que não são implementados em nosso ambiente de destino e, em seguida, aplicar um desses métodos.
Um polyfill é um pedaço de código que implementa recursos modernos para que eles possam ser aplicados para funcionar em versões anteriores do navegador.
Transpilar é uma combinação de duas palavras: transformação - transformação e compilação
- compilação. Às vezes, uma nova sintaxe não pode ser implementada com polyfills, caso em que usamos um transpiler.
Vamos imaginar que estamos usando um navegador antigo que não suporta a função Number.isNaNintroduzido na especificação ES6. Para usar este recurso, precisamos criar um polyfill para este método, mas só precisamos disso se ainda não estiver disponível no navegador.
Para fazer isso, vamos criar uma função que imita o comportamento da função isNaN e adicioná-la à propriedade Number do protótipo.
// isNaN
if (!Number.isNan) {// .
Number.prototype.isNaN = function isNaN(n) {
return n !== n;
};
}
let myNumber = 100;
console.log(myNumber.isNaN(100));
Agora vamos transpilar o código para a função recém-criada. Vamos imaginar que a maioria dos navegadores não pode cumprir esta função, caso em que não podemos criar um polyfill para simular o comportamento. Queremos executar o seguinte código no Internet Explorer 11, então vamos transformá-lo usando um transpiler:
class mySuperClass {
constructor(name) {
this.name = name;
}
hello() {
return "Hello:" +this.name;
}
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello());
//Hello Rick
O código resultante foi portado usando o transpiler online do Babel e agora podemos executá-lo no Internet Explorer 11:
"use strict";
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
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); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
function mySuperClass(name) {
_classCallCheck(this, mySuperClass);
this.name = name;
}
_createClass(mySuperClass, [{
key: "hello",
value: function hello() {
return "Hello:" + this.name;
}
}]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); //Hello Rick
Um dos transpiladores JavaScript mais comuns é o Babel. Babel é uma ferramenta que foi construída para ajudar a portar seu código entre diferentes versões de JavaScript e pode ser instalada através do Node Package Manager (npm).
O Babel se tornou o padrão para compilar aplicativos ECMAScript em uma versão do ECMAScript que funciona em navegadores que não oferecem suporte a esses aplicativos. O Babel pode compilar outras versões do ECMAScript como React JSX.
Nas próximas etapas, veremos como usar o Babel para transpilar e executar a classe mySuperMethod anterior em uma máquina Linux com o Node.js antigo instalado . Em outros sistemas operacionais, como Windows 10 ou macOS, as etapas são semelhantes.
Nota. O Node.js deve estar instalado em sua máquina . O Npm foi adicionado como uma função ao instalador Node.js
1. Abra um prompt de comando e crie um diretório chamado babelExample:
/mkdir babelExample
/cd babelExample
2. Crie um projeto npm e deixe os padrões. O seguinte comando criará um arquivo denominado package.json:
npm init

captura de tela do conteúdo do arquivo package.json após a execução do comando npm init
Aqui index.js (o nome do arquivo pode ser diferente) é o ponto de entrada para nosso aplicativo. É aqui que colocaremos nosso código javascript, então crie um arquivo index.js e coloque o seguinte código nele:
class mySuperClass {
constructor(name) {
this.name = name;
}
hello() {
return "Hello:" +this.name;
}
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello());
//Hello Rick
3. Embora possamos instalar o Babel CLI globalmente, é melhor fazer isso localmente, projeto por projeto. O comando a seguir adicionará o diretório node_modules e modificará o arquivo package.json para adicionar dependências Babel:
npm install -save-dev @babel/core @babel/cli

captura de tela do package.json com dependências do babel
4. Adicione o arquivo de configuração .babelrc à pasta raiz do projeto e inclua plug-ins para as transformações ES2015 +.
Nota. No Babel, cada transformador é um plugin que podemos instalar individualmente. Cada predefinição é uma coleção de plug-ins relacionados. Usando predefinições, não precisamos instalar e atualizar dezenas de plug-ins.
Defina uma predefinição para todos os recursos do ES6 (contém um grupo de plug-ins):
npm install @babel/preset-env --save-dev

captura de tela de package.json com dependência de babel preset-env
Edite o arquivo .babelrc e adicione configuração que inclui transformações para ES6.
Escreva o seguinte código em seu arquivo .babelrc:
{
"presets": ["@babel/preset-env"]
}
5.
Nota de uso . Se você estiver usando o Windows 10 PowerShell, tome cuidado ao codificar seus arquivos, pois você pode obter erros de análise ao iniciar o Babel. É desejável que os arquivos estejam na codificação UTF-8.
input: index.js
output: out folder (Babel deixará os arquivos migrados aqui)
Diretamente executando o seguinte comando no console:
./node_modules/.bin/babel index.js -d out
Com um script npm adicionando a seguinte linha ao arquivo package.json:
"build": "babel index.js -d out"

captura de tela do conteúdo do arquivo package.json após adicionar o script de compilação
Execute o seguinte comando:
npm run build
Em ambos os casos, você obtém na pasta de saída um arquivo (ou arquivos) transpilados em um navegador pronto para trabalhar que não oferece suporte à sintaxe de classe ES6, o código é:
"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
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); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
function mySuperClass(name) {
_classCallCheck(this, mySuperClass);
this.name = name;
}
_createClass(mySuperClass, [{
key: "hello",
value: function hello() {
return "Hello:" + this.name;
}
}]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello());
Conclusão
A linguagem JavaScript está em constante mudança e, graças a essas ferramentas, podemos escrever código com nova sintaxe e novos recursos que ainda não estão implementados em todas as versões de navegadores.
Espero que tenha gostado deste artigo. Eu transmito este e muitos outros artigos úteis para desenvolvedores de front-end iniciantes no canal Frontend.school () Telegram , onde também preparo questionários úteis para testar meus conhecimentos. Chamo a atenção para o fato de que a canalização é puramente um hobby e uma vontade de ajudar e não traz benefícios materiais para mim.