No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripción 🔥

Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

4D
2H
3M
6S

Instalación de dependencias

6/15
Recursos

Las dependencias son paquetes que vamos a utilizar en nuestro proyecto. Un paquete es el conjunto de módulos para resolver un problema. Saber manejar las dependencias en un proyecto permite desarrollar la aplicación más rápido sin partir desde cero.

Existen tres tipos de dependencias: locales, desarrollo y globales.

Qué son las dependencias locales

Las dependencias locales son aquellas que son obligatorias para el proyecto, es decir, son las necesarias para que la aplicación funcione en producción. Producción significa que tu aplicación está disponible para usarse.

Cómo instalar dependencias locales

Para instalar una dependencia local, utiliza uno de los siguientes comandos, donde es el nombre del paquete.

bash $ npm install <paquete> $ $ npm install --save <paquete> $ npm install -S <paquete>

Las dependencias locales se encuentran en el package.json en la propiedad "dependencies", seguido de la versión que fue instalada.

json { ... "dependencies": { "paquete": "1.0.0" } }

Qué son las dependencias de desarrollo

Las dependencias de desarrollo son aquellas que no son obligatorias para el proyecto, es decir, sin estas la aplicación servirá. Estas dependencias ofrecen una ayuda para construir código de forma óptima, por ejemplo, formatear el código, agregar estilos, levantar un servidor para observar los cambios.

Cómo instalar dependencias de desarrollo

Para instalar una dependencia de desarrollo, utiliza el siguiente comando, donde es el nombre del paquete.

bash $ npm install --save-dev <paquete> $ npm install -D <paquete>

Las dependencias de desarrollo se encuentran en el package.json en la propiedad "dev-dependencies", seguido de la versión que fue instalada.

json { ... "dev-dependencies": { "paquete": "1.0.0" } }

Qué son las dependencias globales

Las dependencias globales son aquellas que están disponibles para todos los proyectos en tu computador, pero no aparecen el archivo de configuración package.json.

Cómo instalar dependencias globales

Para instalar una dependencia global, utiliza el siguiente comando, donde es el nombre del paquete.

bash $ npm install --global <paquete> $ npm install -g <paquete>

Ten en cuenta que para instalar dependencias globales requiera permisos elevados, esto se soluciona con la palabra reservada sudo en terminales basadas en Unix, o en Windows ejecutando la terminal como administrador. Puedes revisar este artículo: Resolving EACCES permissions errors when installing packages globally para evitar dar permisos cada vez que instalas una dependencia global.

Las dependencias globales no se encuentran en el package.json, por esta razón recomiendo no abusar de esta herramienta, ya que el archivo de configuración es muy importante para que otros desarrolladores tengan toda la información pertinente al proyecto, incluyendo las dependencias a utilizar.

Cómo visualizar los paquetes instalados

Para ver qué dependencias locales están instaladas, ejecuta el siguiente comando:

bash $ npm list

Para ver qué dependencias globales están instaladas, ejecuta uno de los siguientes comandos:

bash $ npm list -g $ npm list -g --depth 0

Puedes utilizar el flag --depth para indicar la profundidad de dependencias, esto mostrará los paquetes que contiene cada paquete.

bash $ npm list --depth 2

Contribución creada por Andrés Guano (Platzi Contributor).

Aportes 18

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Hola [email protected] 😄

Dependencias

  • npm install moment

  • npm install eslint --save-dev —> dependencia que solo va a ser utilizada en el entorno de desarollo

  • npm install react --save —> dependencia para ser llevada a produccion.

Paquetes Globales

  • npm install -g

Ver lista de los paquetes

  • npm list

Ver lista de paquetes globlales

  • npm list -g

Investigando encontré una información que explica un poco más sobre las dependencias.
.
Las dependencias de desarrollo son aquellos paquetes que necesitamos en un proyecto mientras estamos desarrollándolo, pero una vez tenemos el código generado del proyecto, no vuelven a hacer falta. Los paquetes instalados con el flag --save-dev o -D se instalan en esta modalidad, guardándolos en la sección devDependences del fichero package.json.
.
Por otro lado, las dependencias de producción son aquellos paquetes que necesitamos tener en la web final generada, como librerías Javascript necesarias para su funcionamiento o paquetes similares. Los paquetes instalados con el flag --save-prod-P o directamente sin ningún flag se instalan en esta modalidad, guardándolos en la sección dependences del fichero package.json.
.
Veamos un ejemplo de instalación con ambos tipos de paquetes:

# Instala en modalidad de desarrollo el paquete "gh-pages"
$ npm install --save-dev gh-pages

+ [email protected]3.1.0
added 50 packages from 12 contributors and audited 92 packages in 1.998s

# Instala en modalidad de producción la librería "Howler"
$ npm install howler

+ [email protected]2.2.0
added 1 package from 1 contributor and audited 93 packages in 1.615s

En el primer caso estamos instalando el paquete gh-pages, una librería y comando CLI para desplegar fácilmente un proyecto en GitHub Pages. Como se trata de un paquete que no es necesario incluir en la web final (se utiliza en desarrollo para desplegar), pues lo instalamos con los flags --save-dev o -D.
.
En el segundo caso, estamos instalando el paquete Howler, una librería Javascript que permite manipular y gestionar archivos multimedia de audio desde el navegador. En este caso se trata de una librería JS que si estará incluida en la versión definitiva de la página, por lo que la instalaremos con el flag --save-prod-P o sin indicar ninguno, ya que es la opción por defecto.
.
.

Nunca pares de aprender💚

No sabia que podias instalar cowsay con NPM.

Les dejo un ejemplito muy chulo

  1. Instalar cowsay (npm install cowsay)
  2. Instalar fortune (npm install fortune)
  3. Agregar a scripts el comando cowsay de esta manera:
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
     "cowsay": "fortune | cowsay"
   },
  1. ejecutar cowsay con npm run cowsay
  2. Verán una vaca diciendo una frase cool:

Cero útil pero cuando menos curioso.

por si no les deja instalar el COWSAY, es por permisos del root, se soluciona así.

sudo npm install -g cowsay

Mi resumen de la clase

  • npm install package-name → Instala por defecto una dependencia de producción.
  • npm install package-name —save-dev → Instalar dependencia de desarrollo.
    • npm install package-name -D
  • npm install package-name —save → Instalar dependencia de producción.
    • npm install package-name -S

Los paquetes globales no se ligan a un proyecto, sino al sistema operativo. No todos los paquetes soportan ser instalados de esta forma.

  • npm install -g package-name → Instalar paquete de forma global.
  • npm list → Ver la lista de los paquetes instalados en el proyecto. Para ver los instalados de forma global se usa el flag -g.

¿Recuerdan este para los que vinimos haciendo la ruta completa de FullStack Developer con JavaScript. en el curso de terminal de comandos?

Hay una plataforma para revisar el costo/peso de las librerías de npm (las dependencias agregan peso a nuestros proyectos, así que es importante tenerlo en cuenta en ocasiones). Además muestra paquetes alternativos que también podrían funcionar: https://bundlephobia.com

Y como dato, así como nuestro proyecto usa paquetes/dependencias, esos mismos paquetes tienen sus propias dependencias y eso es lo que vemos en el archivo package-lock.json y por esto mismo es que aunque instalemos 2 paquetes el node_modules es tan grande (por todas las dependencias de todos)

Iniciar el proyecto

git init
npm init

Dependencies (Instalación de dependencias para producción)

npm install dependencia
npm install dependencia -S
npm install dependencia --save

devDependencies (Instalación de dependencias solo para desarrollo)

npm install dependencia -D
npm install dependencia --save-dev

global Dependencies (Instalación global de dependencias (en tú sistema operativo)

Éstas no se integraran a nuesto proyecto, pero si quedaran a nuestra disposición para su uso.

npm install -g dependencia

global list dependencies (Ver una lista de las dependencias globales que tenemos instaladas)

npm list -g


Use el comando: < npm list -g | cowsay -f stegosaurus >

Apunte en Notion

¿Para descargar dependencias para producción son válidas todas estas opciones?

  • npm install <dependenceName>
  • npm install <dependenceName> -P
  • npm install <dependenceName> --save-prod
  • npm install <dependenceName> --save
  • npm install <dependenceName> --S

¿Todas son válidas?

“esLint”: “^8.33.0”

INSTALAR NODE Y NPM en Linux

Otra manera de acceder a las dependencias es indicando los niveles que quieres ver, por ejemplo si quieres ver las dependencias de las dependencias, eso se hace con el flag --depth seguido de un número. por ejemplo, para ver las dependencias de las dependencias globales usaríamos el siguiente comando:

npm list -g --depth 1

La profundidad es 0 cuando no lo indicamos con el flag --depth, o sea que es lo mismo escribir:

npm list -g

npm list -g --depth 0

ambos comandos son equivalentes.

Aunque ahora genere dolores de cabeza, más adelante nos va a resolver problemas de compatibilidad el tener configurado WSL y trabajar en este.

😃 ❤️