Olá devs! 💜
Você está dando seus primeiros passos no desenvolvimento web com JavaScript e decide aprender a criar servidores com Node.js ou usar frameworks como React.
Você lê os tutoriais, digita comandos de terminal sugeridos como npm install e, de repente, uma pasta gigantesca chamada node_modules e dois arquivos estranhos chamados package.json e package-lock.json surgem na sua área de trabalho.
Entrar em contato com o ecossistema de dependências pela primeira vez costuma gerar muitas dúvidas:
“O que são esses arquivos, por que a pasta node_modules é tão pesada e como gerenciar tudo isso?”.
Compreender a lógica do NPM e do arquivo package.json é fundamental para tirar o melhor proveito do desenvolvimento moderno.
É exatamente isso que vamos ver no post dessa semana!
🥰 Siga nossa página no Linkedin e no Instagram e ajude a divulgar nosso conteúdo. Por mais mulheres em tech!
Para entender como funciona o ecossistema de pacotes, vamos fazer uma analogia culinária de um restaurante profissional:
São ferramentas e trechos de código prontos criados por outras pessoas.
Ex: uma biblioteca para conectar ao banco ou para criar animações.
É um enorme mercado online com milhões de bibliotecas prontas.
Quando você digita npm install, você está pedindo para o fornecedor entregar os ingredientes na sua cozinha.
É a despensa física do seu projeto onde os ingredientes (bibliotecas) importados ficam guardados.
Por ter milhares de pastas internas de dependências, ela é extremamente pesada.
É a lista e o manual do seu projeto.
Em vez de guardar todas as sacolas de compras pesadas de ingredientes no GitHub, você envia apenas o livro de receitas.
Nele está escrito exatamente o nome e a marca (versão) de cada ingrediente necessário para o bolo dar certo.
Quando outra desenvolvedora baixa o seu livro de receitas (
package.json), ela roda o comandonpm installe o fornecedor (NPM) vai até a despensa dela (node_modules) e baixa exatamente os ingredientes necessários de forma automática.
O arquivo package.json é escrito em formato JSON (uma lista estruturada de chaves e valores) e contém as informações básicas do seu projeto:
{
"name": "meu-primeiro-projeto",
"version": "1.0.0",
"description": "Um site simples usando Node.js",
"main": "index.js",
"scripts": {
"start": "node index.js",
"test": "jest"
},
"dependencies": {
"express": "^4.19.2"
},
"devDependencies": {
"jest": "^29.7.0"
}
}scripts: Atalhos de comandos de terminal configurados para agilizar sua vida. Em vez de digitar um comando longo para iniciar o servidor, você roda apenas
npm start.dependencies: As bibliotecas que seu projeto precisa para rodar em produção (como o Express para servidores ou React para interfaces).
devDependencies: Ferramentas de desenvolvimento auxiliares usadas apenas na sua máquina de estudos (como o Jest para testes ou bibliotecas de formatação de código), que não vão para o servidor final.
Como ela contém milhares de arquivos que podem ser baixados a qualquer momento pelo NPM, adicione node_modules dentro do seu .gitignore.
Para iniciar um novo projeto e criar o package.json automaticamente pelo terminal, digite:
npm init -yComo dependência de produção:
npm install expressComo dependência de desenvolvimento:
npm install jest --save-dev
Ao assinar nossa newsletter gratuitamente, você terá acesso à nossa biblioteca de recursos, com guias rápidos, e-book, e outros materiais.
👉 https://mulheresprogramando.substack.com/subscribe
Após se inscrever, você receberá um e-mail de boas-vindas com o link para a página de recursos.
Praticamente todo projeto de desenvolvimento web moderno (Front-end e Back-end JavaScript) utiliza o NPM ou gerenciadores equivalentes (como Yarn ou PNPM).
Compreender como estruturar o package.json de forma organizada, gerenciar versões de pacotes e utilizar atalhos na seção de scripts demonstra aos recrutadores que você tem intimidade com as ferramentas reais de engenharia usadas nas empresas.
Esse conhecimento te poupa de erros de deploy comuns de ambiente e prova que você já programa pensando em código colaborativo e profissional.
Espero que tenham gostado do post e até a próxima! 💕

Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.