Usos Práticos de Scripts NPM Além de Build e Start

Desenvolvedores frontend frequentemente começam com comandos simples como npm run build ou npm run start, mas os scripts NPM podem fazer muito mais pelo seu fluxo de trabalho. Você pode aproveitar os scripts NPM para automatizar tarefas repetitivas, otimizar o desenvolvimento e tornar seus projetos mais sustentáveis.

O Que São Scripts NPM e Por Que Usá-los?

Scripts NPM são comandos personalizados definidos no seu arquivo package.json sob a seção "scripts". Eles fornecem uma maneira simples de executar ferramentas de linha de comando e automatizar tarefas sem instalar pacotes globais ou ferramentas de build complexas.

{
  "name": "my-project",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

As principais vantagens dos scripts NPM sobre executores de tarefas como Gulp ou Grunt:

• Configuração zero: Use-os imediatamente com qualquer projeto npm
• Acesso direto a ferramentas CLI: Sem camadas de abstração ou plugins para se preocupar
• Rastreamento de dependências: Ferramentas são instaladas como dependências do projeto, garantindo que todos usem as mesmas versões
• Fluxo de trabalho simplificado: Não há necessidade de aprender a sintaxe de outra ferramenta

10 Scripts NPM Práticos para Desenvolvedores Frontend

1. Linting e Formatação de Código

Estilo de código consistente melhora a legibilidade e reduz erros. Adicione estes scripts para automaticamente verificar e formatar seu código:

"scripts": {
  "lint": "eslint src/**/*.js",
  "lint:fix": "eslint src/**/*.js --fix",
  "format": "prettier --write \"src/**/*.{js,jsx,css,scss,json}\""
}

Execute npm run lint para verificar problemas ou npm run format para formatar automaticamente seu código.

2. Limpeza de Diretórios de Build

Antes de criar um novo build, limpe artefatos de builds anteriores:

"scripts": {
  "clean": "rimraf dist",
  "prebuild": "npm run clean",
  "build": "webpack"
}

O script prebuild executa automaticamente antes de build, garantindo um ambiente limpo toda vez.

3. Executando Testes com Diferentes Configurações

Crie vários scripts de teste para diferentes cenários:

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch",
  "test:coverage": "jest --coverage",
  "test:e2e": "cypress run"
}

4. Gerenciamento de Variáveis de Ambiente

Configure diferentes ambientes para desenvolvimento, teste e produção:

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack serve",
  "build:dev": "cross-env NODE_ENV=development webpack",
  "build:prod": "cross-env NODE_ENV=production webpack"
}

O pacote cross-env garante que estes scripts funcionem em diferentes sistemas operacionais.

5. Observando Mudanças

Reconstrua automaticamente quando arquivos mudarem:

"scripts": {
  "watch:css": "sass --watch src/styles:dist/styles",
  "watch:js": "webpack --watch",
  "watch": "npm-run-all --parallel watch:*"
}

O pacote npm-run-all permite executar múltiplos scripts em paralelo.

6. Sincronização de Arquivos de Ambiente

Crie um script para copiar arquivos de template de ambiente:

"scripts": {
  "sync-env": "node -e \"require('fs').copyFileSync('.env.example', '.env', fs.constants.COPYFILE_EXCL)\"",
  "postinstall": "npm run sync-env"
}

O hook postinstall executa automaticamente após npm install, garantindo que novos membros da equipe obtenham o arquivo de ambiente.

7. Validação de Dependências do Pacote

Verifique dependências desatualizadas, duplicadas ou vulneráveis:

"scripts": {
  "check:deps": "npm outdated",
  "check:security": "npm audit",
  "check:duplicates": "npx depcheck"
}

8. Geração de Documentação

Gere automaticamente documentação a partir de comentários no código:

"scripts": {
  "docs": "jsdoc -c jsdoc.json",
  "predeploy": "npm run docs"
}

9. Fluxos de Trabalho de Release Personalizados

Automatize versionamento e releases:

"scripts": {
  "version:patch": "npm version patch",
  "version:minor": "npm version minor",
  "version:major": "npm version major",
  "release": "npm run build && npm publish"
}

10. Otimização de Assets

Comprima imagens e outros assets:

"scripts": {
  "optimize:images": "imagemin src/images/* --out-dir=dist/images",
  "prebuild": "npm run clean && npm run optimize:images"
}

Técnicas Avançadas de Scripts NPM

Encadeamento de Scripts com Hooks Pre/Post

O NPM executa automaticamente scripts prefixados com “pre” ou “post” antes ou depois do script principal:

"scripts": {
  "prebuild": "npm run lint",
  "build": "webpack",
  "postbuild": "npm run test"
}

Quando você executa npm run build, ele automaticamente executa prebuild, depois build, depois postbuild.

Passando Argumentos para Scripts

Passe argumentos para seus scripts usando --:

npm run lint -- --fix

Isso passa a flag --fix para o comando de linting real.

Usando Variáveis de Ambiente em Scripts

Acesse dados do package.json através de variáveis de ambiente:

"scripts": {
  "echo-version": "echo $npm_package_version"
}

Quando você executa npm run echo-version, ele imprime a versão do seu pacote.

Compatibilidade Multiplataforma

Garanta que seus scripts funcionem em todos os sistemas operacionais com estas ferramentas:

1. rimraf - Alternativa multiplataforma para rm -rf
2. cross-env - Defina variáveis de ambiente em diferentes plataformas
3. npm-run-all - Execute múltiplos scripts em sequência ou paralelo

Exemplo de scripts multiplataforma:

"scripts": {
  "clean": "rimraf dist",
  "copy": "copyfiles -u 1 src/**/*.html dist",
  "dev": "cross-env NODE_ENV=development npm-run-all clean copy --parallel watch:*"
}

Exemplo do Mundo Real: Fluxo de Trabalho Frontend Completo

Aqui está um conjunto abrangente de scripts para um projeto frontend moderno:

{
  "scripts": {
    "clean": "rimraf dist",
    "lint:js": "eslint src/**/*.js --fix",
    "lint:css": "stylelint src/**/*.scss --fix",
    "lint": "npm-run-all --parallel lint:*",
    "test": "jest",
    "test:watch": "jest --watch",
    "format": "prettier --write \"src/**/*.{js,jsx,scss,json,md}\"",
    "validate": "npm-run-all --parallel lint test",
    "build:css": "sass src/styles:dist/styles --style compressed",
    "build:js": "webpack --mode production",
    "build": "npm-run-all clean lint --parallel build:*",
    "watch:css": "sass --watch src/styles:dist/styles",
    "watch:js": "webpack --watch",
    "serve": "browser-sync start --server dist --files dist",
    "dev": "npm-run-all clean --parallel watch:* serve",
    "prepublish": "npm run build",
    "version": "npm run format && git add -A src",
    "postversion": "git push && git push --tags"
  }
}

Esta configuração fornece:

• Verificações de qualidade de código com linting e testes
• Formatação automatizada
• Builds otimizados para produção
• Servidor de desenvolvimento com hot reloading
• Fluxo de trabalho de gerenciamento de versão e publicação

Conclusão

Ao implementar estes scripts NPM práticos, você otimizará seu processo de desenvolvimento, melhorará a qualidade do código e tornará seus projetos mais sustentáveis. Comece pequeno adicionando scripts para as tarefas que você executa com mais frequência, depois expanda gradualmente seu kit de ferramentas de automação.

Perguntas Frequentes