O que acontece quando você executa comandos npm?

Você aperta Enter em um comando npm e espera. De repente, seu projeto funciona. Parece mágica.

Não é mágica. É uma série de requisições de rede, análise de código e otimizações de arquivos.

Pare de executar comandos às cegas. Entenda o mecanismo por trás destes 6 comandos principais.

  1. npm install Este comando lê o seu package.json. Ele entra em contato com um registro na nuvem para encontrar suas dependências. • Ele baixa os pacotes para a pasta node_modules. • Ele resolve conflitos de versão. • Ele cria um package-lock.json para registrar as versões exatas.

  2. npm run format:check Este é um passo de verificação. Ele utiliza ferramentas como o Prettier para escanear seus arquivos. • Ele constrói um layout virtual do seu código. • Ele compara seu código com suas regras de estilo. • Ele sinaliza erros sem alterar seus arquivos.

  3. npm run format Este comando corrige os problemas encontrados durante a verificação. • Ele executa o Prettier no seu projeto. • Ele reescreve seus arquivos para corresponder às suas regras de estilo. • Ele limpa o espaçamento e a formatação automaticamente.

  4. npm run lint Pense nisso como um corretor ortográfico para o seu código. O ESLint busca por erros como: • Erros de sintaxe. • Variáveis não utilizadas. • Imports ausentes. • Uso incorreto de React Hooks.

  5. npm run build Este comando prepara seu app para o mundo real. Ele cria uma pasta dist. • Ele realiza tree shaking para remover código não utilizado. • Ele minifica o código removendo espaços em branco e encurtando nomes de variáveis. • Ele agrupa JavaScript, CSS e assets em arquivos otimizados. • Esses arquivos estão prontos para o deploy em um servidor.

  6. npm run dev Isso inicia um servidor local para você trabalhar. • Ele utiliza Native ES Modules para compilar arquivos apenas quando o seu navegador os solicita. • Ele utiliza Hot Module Replacement (HMR) para atualizar seu site instantaneamente sem a necessidade de recarregar a página.

  7. npm run preview Esta é sua verificação final. Ele ignora seu código-fonte e olha apenas para a pasta dist. • Ele simula como seu app se comportará em um servidor real. • Ele ajuda você a encontrar bugs antes de fazer o deploy para produção.

O terminal não é uma caixa preta. Entender essas ferramentas ajuda você a depurar mais rápido quando algo quebra.

Qual comando mudou a forma como você programa depois que você aprendeu como ele funciona? Conte-me abaixo.

Fonte: https://dev.to/ashomondi/the-magic-under-the-terminal-what-actually-happens-when-you-run-npm-commands-13ba