Se o senhor não trabalha muito com o Node.js, há uma boa chance de não ter explorado as novas adições de sintaxe à linguagem JavaScript fornecidas pelo ES2015. Essas adições à linguagem incluem funções de seta, aulas, escopo do blocoe muito mais. Essas adições à linguagem estão chegando lentamente ao Chrome e ao Firefox, portanto, se o senhor ainda não dedicou tempo para aprender o ES2015, agora é a hora! E que melhor maneira de fazer isso do que escrever seu JavaScript em ES2015 e usar o Babel para transpilá-lo em JavaScript “tradicional” para o navegador? Deixe-me mostrar ao senhor como começar!
Etapa 1: Instalar o Babel com o complemento ES2015
A CLI do Babel está disponível como um pacote do NPM, portanto, começaremos instalando-a:
npm install babel-cli
Em seguida, instalaremos o babel-preset-es2015 para podermos usar as novas adições de sintaxe:
npm install babel-preset-es2015
O Babel tem muitos complementos para uma variedade de modificações de linguagem (como JSX), mas esse complemento é tudo de que precisamos para começar.
Etapa 2: Criar um .babelrc Arquivo
O pequeno arquivo nos permite criar uma predefinição para o uso do babel; como só temos o babel-preset-es2015 adicionaremos apenas esse complemento ao arquivo:
echo '{ "presets": ["es2015"] }' > .babelrc
Neste ponto, temos o Babel instalado e as preferências definidas!
Etapa 3: Crie seus arquivos JavaScript!
A parte divertida será brincar com a nova sintaxe! Aqui está um trecho de código muito simples com funções de seta:
// Just playing around, this doesn't really do anything
((con) => {
['yes', 'no'].forEach((item) => {
con.log(item);
})
})(console);
O babel-preset-es2015 também oferece suporte a classes JavaScript e muito mais, mas vamos manter nossa amostra simples. OK, a amostra foi criada, vamos transpilá-la para o JavaScript “tradicional” para navegadores que ainda não suportam o ES2015!
Etapa 4: Transpilar o JavaScript
Com o Babel instalado e nosso código JavaScript pronto para o tratamento, vamos acionar o processo:
./node_modules/.bin/babel src -d dest
Esse comando transpila todos os arquivos JavaScript no diretório src e os coloca no diretório dest . Nosso arquivo JavaScript de exemplo se torna:
'use strict';
(function (con) {
['yes', 'no'].forEach(function (item) {
con.log(item);
});
})(console);
O senhor reconhecerá isso como algo que vem escrevendo há anos!
É importante observar que, se o senhor não se importa com o navegador, pode simplesmente executar node myFile.js e garantir que seu código funcione corretamente (já que o nó atual está equipado com o açúcar sintático do ES2015). Também é importante ressaltar que as funções de seta foram apenas o meu exemplo e que o ES2015 tem muitas, muitas outras atualizações sintáticas. Além disso, a sintaxe da função de seta altera as implicações da vinculação, portanto, estude cada tipo de atualização sintática antes de usar o!
Reserve um tempo para brincar com o ES2015 – ele estará em todos os principais navegadores em breve e deverá ser mais rápido de digitar e mais compacto em tamanho. Depois de começar, o senhor procurará usar a nova sintaxe em todos os lugares!
