Babel e Webpack explicado por um n00b.

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.