curso-npm-platzi

Aprendiendo npm y dependencias de js

Glosario:

npm: Node Package Manager
CLI: Command Line Client

Cuando se instala Node se tiene acceso a npm entonces no hay de que preocuparse

Diferencias entre paquetes y modulos

Un modulo es un archivo que puede ser importado desde otro archivo.
Un paquete es una carpeta que puede tener varios módulos y son los que se agregan al archivo package.json

Instalación de Node

Descargar la última versión para tener todas las funcionalidades que nos brinda.

Verificar la version de node y npm por medio de la consola

Para node
```
node -v
```
En caso no te funcione puedes ejecutar el siguiente comando:
```
node --version
```
Para npm
```
npm -v
```
En caso no te funcione puedes utilzar el siguiente comando:
```
npm --version
```

¿Podemos tener mas de una version de Node en nuestra computadora?

La respuesta es si, podemos tener varias versiones de node, en caso requieras de esta opción, tendras que desinstalar node de tu computadora:

Seleccionas la opcion de buscar programas en tu computadora (la lupa), escribes "Panel de control".
Te diriges a la opcion de programas y caracteristicas.
Buscar el programa que diga Node.
Click derecho encima de ella.
Click izquierdo en desinstalar.
Sigues los pasos que te indica el programa.

Luego de realizar esos pasos, puedes dar click aquí para descargar nvm buscas el siguiente link:

Al terminar tu descarga instalas el programa como una aplcacion normal. Terminas de instalar y te diriges a tu terminal.

Nota: te recomiendo que sea la terminal de git o instalas desde microsft store una terminal WSL.

Nos aseguramos de que nvm se instalo conrrectamente con el siguiente comando en la terminal:

nvm

Nos mostrara una lista de comandos para poder utilizar similar a la siguiente imagen:

Ahora viene la parte interesante en donde tendremos que instalar alguna version de Node, para eso primero veremos las versiones disponibles mediante la consola con el isguiente comando:

nvm list available

Nos deplegara una tabla con la informacion de las versiones disponibles para trabajar con Node JS

Instalacion de ultima version con nvm

Ya que vimos las versiones disponibles mediante la consola podemos ejecutar la siguiente instruccion por medio de la consola:

nvm install 18.10.0

El comando anterior indica que nvm realizara la instalacion de la version 18.10.0, nos dimos cuenta que elegimos una versión en específico, pero...

¿Qué pasa cuando queremos instalar la ultima versión?, sencillo... Utilizamos el siguiente comando:

nvm install latest

¿Y si queremos la version LTS? es similar al anterior:

nvm install lts

Listar las versiones de Node

Si tenemos instalado nvm podemos ver las diferenctes versiones de Node que tenemos instaladas:

nvm ls

nvm list

Cambiar de versiones con nvm

Supongamos que instalamos 4 versiones de Node y la que esta en uso es la ultima version, pero por cuestiones de compatibilidad u otras cosas tenemos que cambiar a unas versiones anteriores, de que manera la hacemos?

nvm use numeroDeVersion

Ejemplo
```
nvm use 18.6.0
```

¿Como saber que cambiamos de versión?

nvm list

nos mostrar un asterisco en la version que el sistema esta utilizando como en la imagen que se muestra a continuación:

Desinstalar versiones de node con nvm

Hay casos en donde ya no utilizaremos algunas versiones de Node, resulta que tambien podemos eliminar las versiones de Node que tenemos instaladas en nuestra máquina:

nvm uninstall numeroDeVersion

nvm uninstall 18.6.0

Primeros pasos con npm

creamos una carpeta en nuestros archivos: NOTA: Para fines de practica puedes crearla en tu escritorio

Creamos la carpeta
```
mkdir aprendiendo-npm
```
Nos movemos a la carpeta creada
```
cd aprendiendo-npm
```
Creamos sub carpeta de primeros pasos
```
mkdir primeros-pasos
```
Nos movemos a la carpeta creada
```
cd primeros-pasos
```
Inicializamos npm
```
npm init
```

Nos mostrara un recuadro para llenar alguna informacion para dar a conocer de que trata el proyecto que estaremos creando, por defecto el nombre del paquete toma el nombre de la carpeta

Tendremos que rellenar varias opciones pero para fines educativos solo veremos algunas:

Description: podemos dar una breve descripcion de que tratara el proyecto que estaremos realizando
entry point: el punto de entrada que tomara (archivo principal)
git repository: para agregar un repositorio al que guardara los cambios
keywords: palabras clave por ejemplo: Javascript, Node, HTMl, CSS, etc.
author: una de las más importantes, para dar a conocer quien creo el proyecto.
license: que tipo de licencia se utliza en el proyecto (normalmente se utiliza MIT).

En caso no querramos estar haciendo eso de rellenar siempre todos esos campos, podemos utilizar otra instruccion para saltarnos esos pasos:

npm init -y

Instalación de Dependencias

Dependencias de desarrollo VS Dependencias de producción

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.
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.

Dentro de la terminal procedemos con la instalacion de algnas dependencias:

npm install moment

NOTA: esta es la opcion por defecto, ya que se instala como dependencias de producción, que seria lo mismo que colocar:

npm install -P moment

La siguiente dependencia sera para dependencias de desarrollo:

npm install eslint -D

4 maneras de instalar dependencias de producción

```
 npm install react
```
```
 npm install react -S
```
```
 npm install react --save
```
```
 npm install react --save-prod
```

En nuestro package.json podemos ver al final del documento las dependencias que se instalaron:

Podemos ver que hay dependencias de producción (dependencies) y tambien las dependencias de desarrollo (devDependencies).

Instalando dependencias globales

Habra casos en los que tenemos que instalar paquetees globales en nuestro ordenador y se puede hacer de la siguiente manera:

npm install -g cowsay

Cowsay

Podremos tener compañia en nuestra terminal cuando instalamos cowsay!!!

cowsay hola a todos

Otros comandos con cowsay:

cowsay -t Estoy cansado...

cowsay -b Estoy aburrido...

cowsay -d Estoy muriendo

cowsay -f dragon "AHORA SERAS TESTIGO DE MI PODER"

cowsay -f dragon-and-cow "SOY EL REY DE LA TERMINAL VAQUITA"

cowsay -f tux soy el pinguino de Linux

cowsay -f stegosaurus "Estas en la era de los Dinos"

cowsay -f ghostbusters "En tu computadora hay fantasmas..."

cowsay -f elephant "Soy el animal mas grande sobre la tierra"

cowsay -f vader YO SOY TU PADRE

Instalando dependencias de versiones específicas

Dependencias opcionales

npm install eslint -o

Validar Dependencias

Esta instrucción solo verificara si existe algun error al instalarla, solo hace una simulación de instalación para ver que todo este Ok, mas no se instala.

npm install react-dom --dry-run

Instalar una versión específica de un paquete

npm install json-server@0.15.0

Instalar la ultima versión de un paquete

npm install json-server@latest

Instalar dependencias para proyectos clonados

npm install

Crear Scripts personalizados con npm

Crearemos una carpeta nueva:
```
mkdir src
```
Creamos un archivo index.js:
```
touch ./src/index.js
```
Seleccionamos nuestro archivo index.js y escribimos:
```
console.log('Hello World!');
```
Nos dirigimos al archivo package.json y en la parte de scripts colocamos lo siguiente:
```
    "saludar":"node ./src/index.js"
```

Nos quedaria de esta manera:

Par probar nuestro primer script personalizado nos vamos a nuestra terminal al inicio de nuestra carpeta primeros-pasos y ejecutamos el comando:

npm run saludar

Hacer varias acciones en un mismo comando

Ya vimos como hacer un script, pero solo ejecuta una tarea, que tal si intentamos hacer un script que realiza más de una tarea:

En nuestro package.json crearemos un nuevo script:

"actions":"node ./src/index.js && echo \"Realizando otra accion en un mismo comando"\"

NPX

Node Package Execute (NPX) nos permite ejecutar acciones particulares sin tener que pasar por la instalación dentro de nuestro ordenador.

Para fines educativos se hara un pequeño ejemplo de instalar la librería de React:
Salimos de nuestra carpeta primeros-pasos y creamos una nueva carpeta con npx:
```
npx create-react-app my-first-app
```
Escribimos "y" cuando nos pregunte en consola si deseamos instalarlo y esperamos la instalación
Nos vamos a la carpeta my-first-app:

cd my-first-app

Iniciamos el servidor de React:

npm start

Actualización de Dependencias

Para fines educativos utilizaremos el siguiente repositorio para practicar

Nos vamos a nuestra escritorio y creamos una nueva carpeta practicas-updates-npm, con la terminal nos movemos a esa carpeta y ejecutamos los siguiente comandos:

cd practicas-updates-npm

git clone https://github.com/gndx/react-base.git

mkdir react-base

Ahora veremos las dependencias de este proyecto:

npm list

Nos lanzará un mensaje de error, esto ocurre porque no tenemos las dependencias instaladas en nuestro ordenador, para eso ejecutamos el siguiente comando:

npm install

Ahora veremos si podremos ver la lsita de dependencias, pero eso no nos dice mucho de que tenemos que hacer, entonce podemos ejecutar este comando que nos indica que estamos instalando y que version deberiamos de tener para este proyecto:

npm outdate

Para actualizar un paquete usamos lo que vimos anteriormente:

npm install react@latest

Al instalar a la ultima version nos dara un mensaje de error, porque hay otras dependencias que deben de ser actualizadas antes que react:

En este caso react-dom dice que se debe de actualizar primero, entonces procedemos a realizarlo:

npm install react-dom@latest

Y ahora no nos dio ningun error, sin embargo aun tenemos varias cosas por actualizar...

En la imagen que se mostro anteriormente dice que se pueden arreglar algunos de esos errores, pero veremos cuales son, con el sisguiente comando podremos ver cuales son los errores de las dependencias:

npm audit

Lanzara mucha información:

Ahora ¿Como lo arreglamos?, al final de todo ese mensaje nos da otra ayuda que dice que el programa intentara arreglar esos errores de manera automatica: ```bash npm audit fix ``` Te daras cuenta que al final nos dice que quedan menos errores para corregir, significa que si funciono en algunas cosas.

Pero aun quedan varias vulnerabilidades, entonces eso podria ser porque algunas dependencias tienen paquetes muy por debajo para actualizar, por lo que podremos usar otro comando que nos dice en la terminal: ```bash npm audit fix --force ``` Este forzara a corregir más errores, pero en la imagen de abajo podemos ver que dice que algunos paquetes deberan ser actualizados manualmente:

En este caso listamos las dependencias y vemos webpack

npm list

Podremos ver que son 3 dependencias

Entonces actualizamos webpack

npm install webpack@latest

Luego con webpack-dev-server:

npm install webpack-dev-server@latest

Podemos ver que ya no tenemos vulnerabilidades o conflictos en todas las dependencias:

Eliminación de Dependencias y Package lock

En la carpeta de react-base usamos el siguiente comando para poder desintalar las siguientes dependencias:

npm uninstall webpack-dev-server

O tambien podemos hacerlo desde el archivo package.json eliminando los nombres de las dependencias que no queremos, luego de eso ejecutar el siguiente comando en la terminal:

Eliminar node_modules

npm -rf node_modules

El comando de arriba se encarga de eliminar la carpeta completa de node_modules y asi poder deshacernos de esos paquetes que eliminamos del package.json, luego usamos el comando para instalar de nuevo los paquetes:

npm install

Preparar proyecto para producción

Ejecutamos el comando:

npm run build

En caso querramos mas información de que es lo que se esta realizando podemos usar el siguiente comando:

npm run build --dd

Ver las librerias deprecadas

npm ci

Noriega402/curso-npm-platzi