0Pricing
Frontend Academy · Aula

npm e package.json: dependências scripts

Inicialize um projeto com npm init, adicione dependências de execução e de desenvolvimento, escreva scripts npm reutilizáveis e entenda o semver.

npm e package.json: dependências scripts é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que é npm?

O npm (Node Package Manager) gerencia as dependências e os scripts do projeto. Ele lê package.json para saber o que instalar e grava package-lock.json para registrar as versões exatas. Mais de dois milhões de pacotes são publicados no registro do npm.

Inicializando um projeto

npm init -y cria um package.json com valores padrão. A opção -y aceita todos os valores padrão sem exibir perguntas.

mkdir my-project && cd my-project
npm init -y
# Creates package.json

O arquivo package.json

Campos importantes: name, version, description, main (ponto de entrada), scripts, dependencies, devDependencies.

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Instalando pacotes

npm install package adiciona um pacote às dependências. npm install -D package adiciona um pacote às devDependencies (não necessário em produção). npm install, sem argumentos, instala tudo que está em package.json.

npm install react react-dom      # production dep
npm install -D vite jest eslint  # dev deps only
npm install                      # install all from package.json

Versionamento semântico

O npm utiliza versionamento semântico: major.minor.patch. O prefixo ^ permite atualizações compatíveis (com a mesma versão principal). O prefixo ~ permite apenas atualizações de correção. Versões exatas não têm prefixo.

"react": "^18.3.0"  // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3"     // exactly 1.2.3

Scripts do npm

Defina comandos no campo scripts. Execute-os com npm run scriptname. Os scripts integrados (teste e inicialização) podem ser executados diretamente com npm test ou npm start.

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "jest --coverage",
  "lint": "eslint src",
  "typecheck": "tsc --noEmit"
}

npm run versus npx

npm run executa um script de package.json. npx executa um pacote de node_modules ou faz seu download e o executa temporariamente — isso é útil para comandos pontuais, como npx create-vite@latest.

package-lock.json

package-lock.json registra a versão exata de cada pacote instalado (e de suas dependências transitivas). Confirme esse arquivo no controle de versão para garantir que todas as pessoas desenvolvedoras e a integração contínua utilizem versões idênticas. Nunca o edite manualmente.

node_modules e .gitignore

Nunca confirme node_modules no controle de versão — essa pasta pode ocupar centenas de MB. Sempre adicione-a ao .gitignore. Qualquer pessoa pode restaurá-la com npm install.

# .gitignore
node_modules/

Atualizando e removendo pacotes

npm update atualiza pacotes dentro do intervalo de semver. npm outdated mostra o que pode ser atualizado. npm uninstall package remove um pacote.

npm outdated                # show outdated packages
npm update react             # update to latest compatible
npm uninstall lodash         # remove package

npm, yarn e pnpm

Alternativas ao npm: yarn (mais rápido, espaços de trabalho, Plug'n'Play), pnpm (armazenamento de links simbólicos eficiente em disco, dependências estritas, mais rápido para monorepositórios). Os comandos principais são semelhantes nos três.

# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev

Verificação rápida

O que o sinalizador -D faz ao executar npm install -D jest?

Recapitulação: npm e package.json

npm init cria o package.json. npm install adiciona dependências. -D é usado para devDependencies. ^ em semver significa atualizações compatíveis. Os scripts executam comandos com npm run. package-lock.json registra as versões exatas — faça o commit dele. node_modules deve estar no .gitignore. npx executa comandos de pacotes pontuais.

Perguntas Frequentes

A aula “npm e package.json: dependências scripts” é grátis?

Sim — o texto completo de “npm e package.json: dependências scripts” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “npm e package.json: dependências scripts”?

Inicialize um projeto com npm init, adicione dependências de execução e de desenvolvimento, escreva scripts npm reutilizáveis e entenda o semver. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “npm e package.json: dependências scripts”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Módulos ES: import export e importação dinâmica
  2. npm e package.json: dependências scripts
  3. Vite: servidor de desenvolvimento e build
  4. Conceitos de empacotamento: tree shaking e divisão de código
← Voltar para Frontend Academy