Babel + Plugins

Do you know how Babel works? How it generates your new code, what is AST? Showing more about Babel underneath, it main packages (Babylon, Babel Traverse and Babel Generator), where the plugins do they magic and what we built in Loggi using babel plugin system.

Talk given in Frontend-SP:
https://www.meetup.com/pt-BR/Frontend-Dev-SP-Meetup/events/254619509/

Transcript

1. Babel + Plugins no dia a dia
2. O que é o Babel? "Babel is a compiler for writing next generation JavaScript." - https://github.com/babel/babel
3. Como ele funciona? PARSE TRANSFORM GENERATE
4. Babel-Parser | Old: Babylon Responsável pela parte de Parse do Babel - https://github.com/babel/babel/tree/master/packages/ babel-parser
5. Babel-Generator Responsável pela parte de Generate do Babel - https://github.com/babel/babel/tree/master/packages/ babel-generator
6. Babel-Traverse Responsável pela parte de Transform do Babel - https://github.com/babel/babel/tree/master/packages/ babel-parser
7. Pra que véi?
8. Loggi | BabelGraphQL Pega o schema de 1 ou vários entrypoints, mergeia eles caso necessário e passa para o Relay
9. Loggi | BabelReactNativeCSS Localiza os imports de CSS/SCSS em um arquivo JS do React Native, e compila isso para Stylesheet do RN
10. Obrigado!!! @re_agds