npm, build tools, package managers, module bundlers, webpack, dependencies. Sempre fiquei perdido com essas palavras. E as definições sempre foram técnicas demais pro meu gosto.
Então, tirei os últimos dias para entender o que cada uma dessas coisas faz. Ainda bem que o fiz, ter uma visão geral sobre o desenvolvimento web atual me ajuda a direcionar os estudos e reduzir a sensação de sobrecarga com tanta coisa para aprender.
Se você também se sente perdido com isso, segue o resumo do resumo.
npm / yarn / package managers
É um a ferramenta que nos ajuda a instalar e gerenciar dependências. Que nada mais são do que outras ferramentas (libs, frameworks, etc). Fazemos isso através do terminal.
Há poucos anos atrás, incorporar ferramentas de terceiros em nossas aplicações era um processo “manual ” e trabalhoso. Isso poderia gerar múltiplos arquivos, requests em excesso no servidor, erros de paths, inconsistência com o funcionamento das aplicações (por conta das diferentes versões) e muito mais.
O npm veio para facilitar a vida do desenvolvedor, para que ele possa focar mais no código e na construção de aplicações.
Module Bundlers / Webpack / Rollup
Você tem um site simples e quer melhorar a performance dele. Como podemos fazer isso?
Da para otimizar as imagens, minificar o javascript, css e html Dependendo do tamanho do site, vamos ter que traduzir o sass em css e se tivermos vários arquivos de css /js, podemos unificá-los (main.js, style.css). Com esses processos, os arquivos ficam menores e mais rápidos de serem carregados, as requisições no servidor diminuem e muito mais.
Os module bundlers fazem isso (e muito mais) de forma “automática”.
Entender todos esses termos de forma teórica é abstrato demais. Se você for do tipo “tenho que ver para crer”, recomendo fazer pequenos testes com as ferramentas para entender na prática.
Deixei alguns links abaixo para quem quiser entender melhor.
// Links úteis
Modern JavaScript Explained For Dinosaurs – https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html (esse artigo é sensacional)
An Absolute Beginner’s Guide to Using npm – https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/ (na prática)
11 Simple npm Tricks That Will Knock Your Wombat Socks Off – https://nodesource.com/blog/eleven-npm-tricks-that-will-knock-your-wombat-socks-off
Module Bundlers Explained… Webpack, Rollup, Parcel, and Snowpack – https://www.youtube.com/watch?v=5IG4UmULyoA (9 minutos com mais informações úteis que já vi)
Unbundling the JavaScript module bundler – https://slides.com/lucianomammino/unbundling-the-javascript-module-bundler-dublinjs (
NPM Crash Course – https://www.youtube.com/watch?v=jHDhaSSKmB0&t=1591s
Webpack 5 Crash Course – https://www.youtube.com/watch?v=IZGNcSuwBZs (esse eu ainda não vi, vou postar esse texto e assistir)