Acabei de terminar as aulas do Diego Schell Fernandes sobre Babel e Webpack no Ignite da Rocketseat 🚀.
E posso dizer que aprender JavaScript é difícil se você é novo na área como eu.
A tecnologia avança de uma forma que as vezes é muito difícil entender o que a ferramenta se propõe a resolver e o porquê dela o fazer, e você pode se perguntar, mas pra que serve Babel? E o Webpack? Quando que eu vou usar isso?
Então esse artigo nada mais é do que ambas tecnologias explicadas por um n00b.
Babel
O Babel nada mais é do que um tradutor de código.
Ele pega código sofisticado ES6 e transforma em código menos sofisticado ES5, isto é pega código JS que o navegador não entende e traduz para uma língua que o navegador entenda.
Tá mas não entendi ainda.
Vamos pensar no seguinte caso, imagine que você está escrevendo um código JS e escreve da seguinte maneira:
import date from ‘date’;
export default () => date.format(‘YYYY Do MM’);
O navegador por si só não entende isso, e é justamente por isso que precisamos do Babel para transformar o código acima, em um código que o navegador entenda neste caso nisso:
const data = require(‘data’);
function getDateString(){
const moment = date();
return moment.format(‘YYYY Do MM’);
}
export.default = getDateString;
Tá entendi, mas isso funciona só com JavaScript puro?
No caso não, o Babel faz bastante coisa posso colocar em particular dois plugins o @babel /preset-react que faz a tradução de arquivos .jsx para .js e o @babel /preset-typescript que faz a tradução de arquivos .tsx para .js
Ahh agora entendi, mas ele funciona com outros tipos de arquivos? Como .png, .css, .scss etc?
Webpack
Imagina assim, se o Babel é tradutor de Javascript, o Webpack funciona praticamente com tudo, por que o front-end em si é um ambiente complexo com por exemplo CSS, SASS, imagens, fontes etc., e de alguma forma é preciso que todos esses arquivos sejam utilizáveis no nosso site ou aplicação web de forma rápida.
E é aí que entra o Webpack, pois ele pega tudo isso e faz um pacotinho só, que é usado de forma rápida pelo usuário que acessa o site.
O nome desse arquivo é bundle.js e o nome dessa prática é minify ou uglify.
Dessa forma, o Webpack pega todos aqueles módulos instalados e faz a mágica com todas as dependências e transforma tudo em código de uma só linha, que o navegador entende.
O create-react-app por exemplo utiliza tanto o Babel quanto o Webpack por debaixo dos panos.
Concluindo essa parede de texto
O Babel transforma código ES6 atual em código ES5 não tão atual, o que aumenta a gama de navegadores que não terão problemas ao acessar determinado website que o utiliza.
E o Webpack pega todos os arquivos que você tem no seu projeto e faz o minify deles, de forma que o website seja mais rápido, pois o código faz download mais rápido no lado do client, que em retorno acessa de forma mais rápida os conteúdos disponíveis.
Top comments (0)