0Pricing
Frontend Academy · Lección

npm y package.json: dependencias y scripts

Inicialice un proyecto con npm init, añada dependencias de ejecución y de desarrollo, escriba scripts de npm reutilizables y comprenda semver.

npm y package.json: dependencias y scripts es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué es npm?

npm (Node Package Manager) gestiona las dependencias y los scripts del proyecto. Lee package.json para saber qué debe instalar y escribe package-lock.json para registrar las versiones exactas. En el registro de npm se han publicado más de dos millones de paquetes.

Inicializar un proyecto

npm init -y crea un package.json con valores predeterminados. La opción -y acepta todos los valores predeterminados sin mostrar preguntas.

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

El archivo package.json

Campos principales: name, version, description, main (punto 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"
  }
}

Instalar paquetes

npm install package añade el paquete a dependencies. npm install -D package lo añade a devDependencies (no es necesario en producción). npm install sin argumentos instala todo lo indicado en 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

Versionado semántico

npm usa semver: major.minor.patch. El prefijo ^ permite actualizaciones compatibles (con la misma versión major). El prefijo ~ permite únicamente actualizaciones de patch. Las versiones exactas no llevan prefijo.

"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 de npm

Defina comandos en el campo scripts. Ejecútelos con npm run scriptname. Los scripts integrados (test, start) se ejecutan directamente con npm test o npm start.

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

npm run frente a npx

npm run ejecuta un script de package.json. npx ejecuta un paquete de node_modules o lo descarga y ejecuta temporalmente; resulta útil para comandos puntuales como npx create-vite@latest.

package-lock.json

package-lock.json registra la versión exacta de cada paquete instalado (y de sus dependencias transitivas). Confírmelo en el control de versiones para garantizar que todos los desarrolladores y la integración continua usen versiones idénticas. Nunca lo edite manualmente.

node_modules y .gitignore

Nunca confirme node_modules: puede ocupar cientos de MB. Añádalo siempre a .gitignore. Cualquiera puede restaurarlo con npm install.

# .gitignore
node_modules/

Actualizar y eliminar paquetes

npm update actualiza los paquetes dentro de su rango de semver. npm outdated muestra qué paquetes se pueden actualizar. npm uninstall package elimina un paquete.

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

npm frente a yarn frente a pnpm

Alternativas a npm: yarn (más rápido, espacios de trabajo, Plug'n'Play) y pnpm (almacén de enlaces simbólicos eficiente en disco, dependencias estrictas y mayor velocidad en monorepos). Los comandos principales son similares en los tres.

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

Comprobación rápida

¿Qué hace la opción -D al ejecutar npm install -D jest?

Resumen: npm y package.json

npm init crea package.json. -D añade el paquete a devDependencies. ^ en semver indica actualizaciones compatibles. Los scripts ejecutan comandos con npm run. package-lock.json registra las versiones exactas; inclúyalo en el control de versiones. node_modules debe incluirse en .gitignore. npx ejecuta comandos de paquetes puntuales.

Preguntas frecuentes

¿La lección «npm y package.json: dependencias y scripts» es gratis?

Sí — el texto completo de «npm y package.json: dependencias y scripts» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «npm y package.json: dependencias y scripts»?

Inicialice un proyecto con npm init, añada dependencias de ejecución y de desarrollo, escriba scripts de npm reutilizables y comprenda semver. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «npm y package.json: dependencias y scripts»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Módulos ES: import export y dynamic import
  2. npm y package.json: dependencias y scripts
  3. Vite: servidor de desarrollo y build
  4. Conceptos de bundling: tree shaking y code splitting
← Volver a Frontend Academy