Olá! Se você é como eu, você está cansado de escrever o mesmo velho código JS ES5 em suas aplicações Node.js.
Se sim, você pode usar as novas funcionalidades do JavaScript ES2015 e ES2016 em suas aplicações Node.js hoje. ES2015 e ES2016 tornam o desenvolvimento JavaScript uma brisa, mas nem todos os recursos do ES2015 são suportados em nosso amado Node.js.
Aqui é o onde o Babel chega para o resgate. Babel é um transpiler para JavaScript que transpila seus códigos ES2015 e ES2016 para códigos ES5 e até mesmo ES3. Em palavras simples, ele converte seus códigos em um JavaScript que o Node.js pode executar e faz você muito feliz.
Nota: Node.js já suporta várias funcionalidades do ES2015, então se você não quiser transpilar o código ES2015, você pode executar o Node.js com a flag --harmony para habilitar mais algumas funcionalidades (em fase de teste). Para obter mais flags do conjunto de funcionalidades experimentais --harmony, execute o comando: node --v8-options | grep harmony. Contudo, note que nem todas as funcionalidades são suportadas mesmo nas últimas versões do Node.js (versão 5 no momento da escrita), e as funcionalidades que necessitam de flags geralmente estão instáveis ou incompletas. Então continue lendo para fazer uso de mais funcionalidades do ES2015 e ES2016, sem a necessidade de flags.
Algumas premissas feitas
Existem algumas premissas que estou fazendo sobre você! SIM VOCÊ!
- Você já possui alguma experiência com Node.js.
- Você consegue instalar pacotes usando o npm.
- Você já tem Node.js e npm instalados.
- Você está confortável com o uso ocasional da linha de comando.
- É bom saber algo sobre ES2015, mas não é obrigatório.
Seguindo ao longo do código
É do tipo de pessoa que segue o código em vez de apenas ler? O código está disponível nesse repositório.
Instalando e começando com Babel
Há muitas maneiras de configurar o Babel. Aqui vamos discutir o suficiente para começar a usar o babel-cli.
Vamos criar um simples index.js em um diretório code que conterá o seguinte código ES2015:
function* jsRocksIsAwesome() { yield "JS Rocks is Awesome"; yield "JS Rocks says JavaScript Rocks"; return "because JavaScript really rocks"; } var jsRocks = jsRocksIsAwesome(); console.log(jsRocks.next()); console.log(jsRocks.next()); console.log(jsRocks.next()); Vamos instalar o pacote babel-cli com o próximo comando. Isto irá instalar a última versão estável do babel-cli para o projeto atual e listá-lo como uma das devDependencies no package.json:
npm install --save-dev babel-cli Agora se você executar:
babel code/index.js -d build/ Você verá o mesmo código que você escreveu aparecer em build/index.js. É aqui que entra os plugins e presets do Babel.
Plugins e Presets
Babel não faz muito por conta própria, mas com plugins e presets é possível fazer muito. Nós queremos todas as vantagens do ES2016 e ES2015 em nosso código.
Para fazer isso, vamos instalar dois presets como parte de nossas devDependencies:
- es2015
- stage-0
Execute o comando a seguir para instalar estes presets:
npm install --save-dev babel-preset-es2015 babel-preset-stage-0 Babel possui uma vasta gama de plugins que você pode encontrar aqui.
Agora você precisa incluir estes presets no comando que você executará:
babel --presets es2015,stage-0 code/index.js -o build/app.js Você verá o código ES5 normal gerado no arquivo app.js, isso é chamado de código transpilado (um termo largamente usado no mundo JS). Você pode rodar esse código usando o comando abaixo.
node build/app.js Configurando um ambiente de build adequado usando Babel
Isso é tudo muito mágico, mas e que tal fazer um desenvolvimento sério usando Node.js?
Arquivo de configuração do Babel .babelrc
.babelrc é uma maneira muito elegante de separar todas suas configurações do Babel em um arquivo JSON. É também muito fácil de começar. Esse é o nosso arquivo .babelrc para este tutorial:
{ "plugins": ["es2015", "stage-0"] } Você pode configurar mais opções do .babelrc e torná-lo tão robusto quanto você desejar.
É basicamente isto de configuração do Babel que usaremos para este tutorial. Agora sempre que quisermos adicionar ou remover plugins, ao invés de alterarmos o comando, vamos alterar o array de plugins nesse arquivo. Fácil. Não é?
Agora se você executar:
babel -w code/ -d build/ Ele irá ler os presets do .babelrc para compilar o código no diretório code/ e gerar os arquivos JavaScript compilados no diretório build/, mas olhe! O comando ainda não acabou. Note a flag -w: é para observar e recompilar o código conforme você fizer mudanças em seu diretório code. LEGAL! É dessa magia que estou falando.
Usando source maps em seu arquivo
Você pode estar pensando que é tudo legal e diverdito, mas que tal debuggar algum código de verdade. Você não deve se preocupar. Source maps são exatamente para esse propósito. Source maps dizem ao Node.js que este código é transpilado e aponta para os erros no arquivo de origem ao invés do arquivo transpilado!
O arquivo code/error.js dispara um erro após o segundo yield no gerador, mas o código transpilado parece bem diferente.
function* errorFulGenerator() { yield "yo"; throw new Error("source maps are awesome"); return ""; } var errorGen = errorFulGenerator(); errorGen.next(); errorGen.next(); Nós usamos esse comando para gerar source maps junto com o código transpiled. Note a flag --source-maps:
babel code/ -d build/ --source-maps Agora quando encontrarmos o erro, nós obteremos informações úteis para debugar, como estas:
errorGen.next() ^ Error: source maps are awesome at errorFulGenerator (/home/programreneur/Programming/githubRepos/babeljs-short-tutorial/code/error.js:3:9) at next (native) at Object. (/home/programreneur/Programming/githubRepos/babeljs-short-tutorial/code/error.js:10:10) at Module._compile (module.js:425:26) at Object.Module._extensions..js (module.js:432:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:313:12) at Function.Module.runMain (module.js:457:10) at startup (node.js:138:18) at node.js:974:3 Então é assim que você vai usar source maps.
Configurando o comando npm
A fim de simplificar o processo de build ainda mais, você pode editar o seu arquivo package.json e incluir um script de build para o Babel. No objeto scripts do arquivo package.json você pode adicionar o código tal como segue abaixo:
"scripts": { "build": "babel -w code/ -d build -s" } Agora, podemos executar:
npm run build E obtenha todas as vantagens do ES2015/ES2016 hoje. :)
Aprenda mais sobre Babel
Esse é um tutorial básico do Babel, mas o mundo do Babel apenas começa aqui. É cercado por uma comunidade maravilhosa e é usado por grandes nomes no mundo da TI. Babel tem suporte para todas as principais ferramentas de compilação como Grunt e gulp. Você pode checar tudo isso no site do Babel.
Estes são alguns dos recursos que podem ajudar a aprimorar os teus conhecimentos no mundo do Babel:
- Learn ES2015 and Babel using this detailed tutorial
- Read the Babel docs on setting up Babel (They're helpful)
Código-fonte, contribuições e agradecimentos
O código-fonte desse tutorial está disponível nesse repositório.
Se você encontrou algum erro de digitação ou gostaria de fazer alguma atualização, por favor, faça isso usando o poder das issues e PR em nosso repositório no GitHub.
Eu gostaria também de agradecer o Fabrício Matté por aprovar esse artigo no JS Rocks e pelas correções que ele fez.
Comments