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 鈥攕ave-dev 鈫 Instalar dependencia de desarrollo.
    • npm install package-name -D
  • npm install package-name 鈥攕ave 鈫 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?

鈥渆sLint鈥: 鈥淾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.

馃槂 鉂わ笍