{"id":1853,"date":"2017-03-09T08:12:05","date_gmt":"2017-03-09T11:12:05","guid":{"rendered":"http:\/\/www.milfont.org\/tech\/2017\/03\/09\/transpilando-com-babel\/"},"modified":"2017-03-09T08:12:05","modified_gmt":"2017-03-09T11:12:05","slug":"transpilando-com-babel","status":"publish","type":"post","link":"https:\/\/www.milfont.org\/tech\/2017\/03\/09\/transpilando-com-babel\/","title":{"rendered":"Transpilando com Babel"},"content":{"rendered":"
\n

\nDisclaimer: use o <\/em>create-react-app<\/em><\/strong><\/a> se for aprender com React ou aguarde enquanto publico sobre o Webpack para os demais projetos.<\/em>\n<\/p>\n<\/blockquote>\n

Esse tutorial eu utilizarei o Browserify para explicar como funciona o Babel, a ferramenta que tornou poss\u00edvel o futuro hoje.<\/p>\n

O que \u00e9 o\u00a0Babel?<\/h3>\n

\u00c9 uma ferramenta que transforma c\u00f3digo Javascript (e at\u00e9 de outras linguagens)<\/a> para uma vers\u00e3o espec\u00edfica que voc\u00ea queira executar, como ES5 que \u00e9 de 2009 e praticamente funciona em todos os navegadores que existam.<\/p>\n

Vamos criar um Hello World em React usando uma extens\u00e3o da linguagem que ele tr\u00e1s, o JSX<\/a>, para um c\u00f3digo que os navegadores entendam. Vou usar uma vers\u00e3o mais nova do Javascript, o ES6 que roda nativamente no Chrome, Firefox, Edge e demais navegadores modernos.<\/p>\n

Transpilar<\/h3>\n

Para \u201ctranspilar\u201d o c\u00f3digo antes j\u00e1 que a sintaxe JSX n\u00e3o \u00e9 reconhecida, usar\u00e1 o Babel que sabe como portar. Transpila\u00e7\u00e3o \u00e9 um neologismo das palavras compila\u00e7\u00e3o e transforma\u00e7\u00e3o.<\/p>\n

Crie uma arquivo chamado package.json<\/strong> com comando npm init<\/strong>.<\/p>\n

https:\/\/gist.github.com\/d25d214894ec4de895d104ca06670cb3<\/a><\/p>\n

Ele far\u00e1 algums perguntas para definir os parametros b\u00e1sicos do package. Se preferir pode deixar tudo em branco e vai s\u00f3 apertando Enter.<\/p>\n

Usando o gerenciador de pacotes do nodejs, o npm<\/strong>, execute em um terminal a instala\u00e7\u00e3o do Babel e suas depend\u00eancias na raiz do projeto.<\/p>\n

https:\/\/gist.github.com\/93124ac30791fabf6a96c82b322b4599<\/a><\/p>\n

Presets e\u00a0plugins<\/h3>\n

O Babel por si s\u00f3 \u00e9 uma plataforma de \u201ctranspila\u00e7\u00e3o\u201d, voc\u00ea precisa de presets<\/strong> que s\u00e3o um conjunto de plugins com as instru\u00e7\u00f5es espec\u00edficas de uma linguagem que deseja portar pra javascript e plugins que s\u00e3o extens\u00f5es das linguagens, geralmente uma funcionalidade especifica que deve ser transpilada<\/strong>. Utilizar\u00e1 o preset babel-preset-react<\/strong> para o projeto.<\/p>\n

Para este tutorial voc\u00ea utilizar\u00e1 a escrita de c\u00f3digo com a sintaxe do Javascript 6 que apesar de algumas vers\u00f5es de navegadores n\u00e3o darem suporte pleno pode ser traduzido para vers\u00f5es anteriores. Execute agora a instala\u00e7\u00e3o desses presets.<\/p>\n

https:\/\/gist.github.com\/7f439f2e780c0a078c1bec6041bd0765<\/a><\/p>\n

O preset<\/strong> de stage \u00e9 o n\u00edvel que ser\u00e1 transpilado em rela\u00e7\u00e3o a especifica\u00e7\u00e3o, sendo o zero a proposta inicial que pode at\u00e9 a n\u00e3o ser especificada e o n\u00edvel 3 a indica\u00e7\u00e3o que j\u00e1 tem um candidato maduro para a pr\u00f3xima vers\u00e3o.<\/p>\n

Por fim instale as bibliotecas do React.<\/p>\n

https:\/\/gist.github.com\/ec2fd4016dbb987c8f80071c5b915db8<\/a><\/p>\n

O package.json<\/strong> deve ficar com a seguinte estrutura gra\u00e7as a instru\u00e7\u00e3o save<\/strong> passada que indica ao npm que deve salvar uma entrada no arquivo com a vers\u00e3o instalada de cada biblioteca.<\/p>\n

Al\u00e9m disso uma pasta node_modules<\/strong> foi criada e ser\u00e1 aonde as bibliotecas de depend\u00eancia do projeto ficar\u00e3o. As vers\u00f5es podem ter alguma diferen\u00e7a para o seu arquivo, essas vers\u00f5es s\u00e3o as existentes durante a escrita deste tutorial.<\/p>\n

https:\/\/gist.github.com\/052ee9675f07edf7ec36ff65b4c7183f<\/a><\/p>\n

Hello World<\/h3>\n

Crie uma pasta chamada app<\/strong>.<\/p>\n

No seu editor, escreva a function seguinte para imprimir o cl\u00e1ssico Hello World<\/strong> na tela e salve no arquivo app\/app.jsx.<\/p>\n

https:\/\/gist.github.com\/5a9815bed3b9f9d052edfab788a58aa4<\/a><\/p>\n

ReactDOM faz a renderiza\u00e7\u00e3o da interface, que \u00e9 a biblioteca respons\u00e1vel em \u201ccolar\u201d a \u00e1rvore de componentes chamados Virtual DOM<\/strong> (aguarde post sobre Virtual-DOM) na p\u00e1gina.<\/p>\n

https:\/\/gist.github.com\/8dfedb6fe669ca1b40caaca4cfb97812<\/a><\/p>\n

O c\u00f3digo completo para gerar o Hello World<\/strong>.<\/p>\n

https:\/\/gist.github.com\/a085fde1a8e7aa6832fc7cf0b2232144<\/a><\/p>\n

Crie uma pasta chamada public<\/strong> aonde armazenar\u00e1 todos os arquivos est\u00e1ticos como o javascript gerado que vai pra produ\u00e7\u00e3o.<\/p>\n

Salve um arquivo nessa pasta chamado index.html<\/strong> para testar o c\u00f3digo com o seguinte HTML.<\/p>\n

https:\/\/gist.github.com\/d4966178a18d54c48ca7e41e7440c4d0<\/a><\/p>\n

Crie uma pasta assets\/js<\/strong> dentro da public<\/strong> que ser\u00e1 o local do arquivo final transpilado.<\/p>\n

Agora no mesmo terminal, executa a instru\u00e7\u00e3o com a biblioteca babel-cli<\/strong> que \u00e9 o execut\u00e1vel do Babel, informando qual arquivo deve transpilar e a op\u00e7\u00e3o -o indicado que o arquivo bundle.js ser\u00e1 gerado. Al\u00e9m disso a op\u00e7\u00e3o\u200a\u2014\u200apresets para indicar que linguagens corretas ser\u00e3o utilizadas.<\/p>\n

https:\/\/gist.github.com\/d5a47230755e8de24a9d8880668baf07<\/a><\/p>\n

Se voce abrir o arquivo gerado, ver\u00e1 a instru\u00e7\u00e3o de return<\/strong> da fun\u00e7\u00e3o com JSX em app.jsx, que era:<\/p>\n

https:\/\/gist.github.com\/69e8c165b20a24e1173948ad7a4c4f05<\/a><\/p>\n

Traduzida do JSX para o Javascript que os navegadores entende:<\/p>\n

https:\/\/gist.github.com\/65e18708caeb21b38cfa8d29c69f3894<\/a><\/p>\n

Altere a sintaxe usando uma abordagem em ES6, n\u00e3o se preocupe em entender ainda. Escreva a function Root como no c\u00f3digo seguinte:<\/p>\n

https:\/\/gist.github.com\/fd9897153a553d2fe4a525dfc941220a<\/a><\/p>\n

Antes de executar a tradu\u00e7\u00e3o, aproveite esse momento pra utilizar um recurso que o nodejs disponibiliza para execu\u00e7\u00e3o desses scripts. Crie uma entrada no package.json chamada scripts<\/strong> para colocar a tarefa de tradu\u00e7\u00e3o. O arquivo ficar\u00e1 como:<\/p>\n

https:\/\/gist.github.com\/561c0c008bee825bf8c1e6e777e0f0ee<\/a><\/p>\n

N\u00e3o precisa mais invocar o comando a partir do caminho completo da biblioteca babel-cli<\/strong> porque o nodejs j\u00e1 entende que em suas tarefas ele pode encontrar esse comando dentro da pasta node_modules.<\/p>\n

Agora basta executar a instru\u00e7\u00e3o:<\/p>\n

https:\/\/gist.github.com\/d2cffdf2a4f8fbf44ac024413d8d7f0e<\/a><\/p>\n

Ainda \u00e9 necess\u00e1rio incluir o React no html para o exemplo funcionar, enquanto n\u00e3o monta o ambiente ideal, acrescente o react e o react-dom diretamente de uma CDN dispon\u00edvel.<\/p>\n

https:\/\/gist.github.com\/a73d142dbf30523b4f84ab564c1e7c9f<\/a><\/p>\n

Agora abra o index.html direto no seu navegador (open public\/index.html no terminal deve funcionar) e dever\u00e1 ver a mensagem Hello World<\/strong> na tela<\/p>\n

Preparando um ambiente\u00a0ideal<\/h3>\n

Uma grande conquista da comunidade em torno do Javascript foi a maturidade de uma biblioteca chamada browserify<\/strong> que transporta o c\u00f3digo executado em um terminal no seu sistema operacional para um c\u00f3digo reconhecido pelos navegadores. Hoje temos uma evolu\u00e7\u00e3o com o Webpack, mas fica pra um pr\u00f3ximo artigo.<\/p>\n

Portanto em vez de utilizarmos as depend\u00eancias a partir de um CDN, podemos utilizar o NodeJS para importar as bibliotecas e incluir no arquivo final transpilado junto com seu c\u00f3digo.<\/p>\n

No terminal, instale o browserify:<\/p>\n

https:\/\/gist.github.com\/7691e3c2933a9329987e987d54365657<\/a><\/p>\n

Para n\u00e3o termos necessidade de passar par\u00e2metros para o babel, podemos criar um arquivo chamado\u00a0.babelrc<\/strong> na raiz do projeto com o seguinte conte\u00fado:<\/p>\n

https:\/\/gist.github.com\/b618b0f076993ba415e02be461b7693e<\/a><\/p>\n

Instale tamb\u00e9m um pacote chamado babelify que \u00e9 quem faz a liga\u00e7\u00e3o entre o babel e o browserify:<\/p>\n

https:\/\/gist.github.com\/9fdf718cc1f461d71fd35972cac34711<\/a><\/p>\n

Esse pacote \u00e9 um transformer<\/strong>, um mecanismo que o browserify utiliza semelhante ao princ\u00edpio do preset<\/strong> do babel, ele executar\u00e1 o transformer babelify para processar por meio do babel e transpilar o c\u00f3digo no mesmo processo de portar para o navegador.<\/p>\n

No seu arquivo package.json, edite a task pra ficar assim:<\/p>\n

https:\/\/gist.github.com\/6ba62086c51994c18447cb17eae4fb05<\/a><\/p>\n

No seu arquivo app.jsx agora pode colocar as importa\u00e7\u00f5es das depend\u00eancias:<\/p>\n

https:\/\/gist.github.com\/6ca124e401f29e79b1d457b8dd132fba<\/a><\/p>\n

Retire as depend\u00eancias do index.html voltando ao c\u00f3digo inicial:<\/p>\n

https:\/\/gist.github.com\/fa971c3c10e64444b71ce9f5d61a5c3b<\/a><\/p>\n

Se estivesse utlizando o preset es2015 o c\u00f3digo seria totalmente portado para o ES5 que todos os navegadores existentes conhecem.<\/p>\n

Esse preset vem com um conjunto de plugins que traduzem tudo, j\u00e1 que escolhemos manter a sintaxe do ES6 e privilegiar apenas os navegadores modernos, precisamos instalar um plugin que resolve o import\/export do Javascript novo.<\/p>\n

Se voc\u00ea tentar executar o build novamente vai se deparar com o seguinte erro:<\/p>\n

https:\/\/gist.github.com\/f3459b0b45aecf2860d86446e5e4ee82<\/a><\/p>\n

Ent\u00e3o instale um plugin (estaria no preset es2015) que resolve isso.<\/p>\n

https:\/\/gist.github.com\/474e88caf8c74c7d2ec6b0cd87bb23a1<\/a><\/p>\n

Inclua o plugin no seu arquivo\u00a0.babelrc:<\/p>\n

https:\/\/gist.github.com\/e028e15fd6dbf09dd82cff2432cf018e<\/a><\/p>\n

Executando novamente o comando para gerar o arquivo bundle.js transpilado:<\/p>\n

https:\/\/gist.github.com\/0db7541f80c3876a5f8553dab5338c40<\/a><\/p>\n

O seu arquivo bundle.js agora tem todas as depend\u00eancias necess\u00e1rias para utilizar esse c\u00f3digo no navegador.<\/p>\n

Gerando o bundle.js automaticamente a cada\u00a0mudan\u00e7a<\/h3>\n

Esse processo de transpilar \u00e9 cont\u00ednuo, portanto n\u00e3o \u00e9 produtivo ficar executando a task de build a cada modifica\u00e7\u00e3o.<\/p>\n

Instale uma biblioteca chamada watchify<\/strong> que fica observando as mudan\u00e7as e executando o browserify pra voc\u00ea:<\/p>\n

https:\/\/gist.github.com\/732bbdfafd3f0f8ddbf0d8b0a6b41b2e<\/a><\/p>\n

Agora inclua no package.json a configura\u00e7\u00e3o para o babelify conseguir executar o browserify:<\/p>\n

https:\/\/gist.github.com\/fd2588ce28c1879c074e44ed348fa90c<\/a><\/p>\n

Edite o seu arquivo package.json para executar com o watchify criando mais uma task com nome de watch:js<\/strong>:<\/p>\n

https:\/\/gist.github.com\/65a90cebe0afed53817bec6cf2139cfc<\/a><\/p>\n

O par\u00e2metro -m<\/strong> gerar\u00e1 um mapa entre o c\u00f3digo original e o transpilado dentro do bundle.js num formato que os navegadores entendem para facilitar o debugging.<\/p>\n

O par\u00e2metro -d<\/strong> informa que o processo de watch deve ficar executando e aguardando as modifica\u00e7\u00f5es.<\/p>\n

O par\u00e2metro -v<\/strong> significa que o modo \u00e9 \u201cverboso\u201d, todas as informa\u00e7\u00f5es de erro e tradu\u00e7\u00e3o devem ser lan\u00e7adas no terminal.<\/p>\n

O par\u00e2metro -o<\/strong> significa o arquivo de sa\u00edda que ser\u00e1 gerado como no babel e no browserify.<\/p>\n

Agora voce executar a task no terminal e deixar traduzindo:<\/p>\n

https:\/\/gist.github.com\/72734f9f5e799d3407f7a2c1274a3108<\/a><\/p>\n

Realize qualquer mudan\u00e7a no arquivo e veja no terminal o reflexo da sua altera\u00e7\u00e3o, como por exemplo:<\/p>\n

https:\/\/gist.github.com\/8345893d699a72975f0616a0cb32c426<\/a><\/p>\n

A sa\u00edda do terminal ficar\u00e1 com algo assim:<\/p>\n

https:\/\/gist.github.com\/974f19b1035c4bb27ff3373df3b5dc59<\/a><\/p>\n

Considera\u00e7\u00f5es finais<\/h3>\n

O Browserify j\u00e1 sente o peso da idade e \u00e9 aconselhado usar o Webpack, mas \u00e9 excelente para demonstrar o Babel porque as outras ferramentas escondem os detalhes, o que n\u00e3o \u00e9 errado.<\/p>\n

Espero que esse artigo\/tutorial ajude principalmente a desenvolvedores Backend que querem conhecer o fant\u00e1stico e admir\u00e1vel mundo novo.<\/p>\n

\n

Originally published at <\/em>gist.github.com<\/em><\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Disclaimer: use o create-react-app se for aprender com React ou aguarde enquanto publico sobre o Webpack para os demais projetos. Esse tutorial eu utilizarei o Browserify para explicar como funciona o Babel, a ferramenta que tornou poss\u00edvel o futuro hoje. O que \u00e9 o\u00a0Babel? \u00c9 uma ferramenta que transforma c\u00f3digo Javascript (e at\u00e9 de outras […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/1853"}],"collection":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/comments?post=1853"}],"version-history":[{"count":0,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/1853\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/media?parent=1853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/categories?post=1853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/tags?post=1853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}