Instalación de dependencias

Hola Chic@s 😄

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

+ gh-pages@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

+ howler@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.

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)

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

06/15 Curso de NPM: Instalación de Dependencias

Primero, veamos de forma sencilla que son las dependencias:

En el mundo de la programación, las “dependencias” se refieren a piezas de código o bibliotecas que tu programa o proyecto necesita para funcionar correctamente. Imagina que estás construyendo una casa con bloques de construcción. Cada bloque de construcción representa una parte de tu proyecto, como una función o una característica.

Las dependencias son como los bloques de construcción especiales que no fabricas tú mismo, sino que los obtienes de una tienda. Necesitas estos bloques de construcción específicos porque hacen cosas útiles que no quieres o no puedes construir desde cero.

Aquí hay un ejemplo más concreto:

Imagina que estás creando un sitio web y deseas agregar un calendario interactivo a tu página. Ahora, en lugar de escribir todo el código para hacer un calendario desde cero, puedes buscar en una tienda (que es como la tienda de dependencias en el mundo de la programación) y encontrar un “paquete de calendario” que alguien más ya ha construido.

Este “paquete de calendario” es una dependencia. Lo descargas y lo usas en tu proyecto, y tu sitio web ahora tiene un calendario funcional sin que hayas tenido que escribir todo el código complicado tú mismo.

Las dependencias pueden ser pequeñas, como una función simple que hace una tarea específica, o grandes, como bibliotecas enteras con muchas funciones y características. Son útiles porque te permiten reutilizar el trabajo de otros programadores y te ahorran tiempo y esfuerzo.

Es importante gestionar las dependencias de tu proyecto correctamente para asegurarte de que funcionen bien juntas y que tu proyecto no se rompa debido a incompatibilidades entre ellas. Para hacer esto, las herramientas como NPM (Node Package Manager) se utilizan para instalar, actualizar y gestionar las dependencias en tus proyectos de programación.

Instalando dependencias

La instalación de dependencias en un proyecto de Node.js es una parte fundamental del desarrollo de aplicaciones, ya que permite incorporar bibliotecas y paquetes de terceros para extender las capacidades de tu aplicación. Puedes instalar dependencias utilizando NPM (Node Package Manager), que es la herramienta estándar para la gestión de dependencias en proyectos Node.js. Aquí te muestro cómo hacerlo:

1. Crear o navegar hasta el directorio del proyecto:

Asegúrate de estar en el directorio de tu proyecto o crea uno nuevo usando el comando mkdir (crear directorio) o cd (cambiar directorio) en tu terminal.

mkdir mi_proyecto
cd mi_proyecto

2. Inicializar un archivo package.json:

Si aún no tienes un archivo package.json, puedes crearlo usando el siguiente comando. El archivo package.json es donde se registran las dependencias y configuraciones de tu proyecto.

npm init

Sigue las instrucciones en la terminal para configurar tu archivo package.json. Puedes aceptar las opciones predeterminadas o personalizarlas según tus necesidades.

3. Instalar una dependencia:

Para instalar una dependencia, usa el comando npm install seguido del nombre de la dependencia que deseas instalar. Por ejemplo, para instalar el paquete express, que es un marco web popular para Node.js:

npm install express

Esto descargará el paquete express desde el registro público de NPM y lo agregará como una dependencia en tu archivo package.json. Además, creará una carpeta llamada node_modules en tu proyecto para almacenar el código de la dependencia y sus dependencias.

4. Instalar dependencias de desarrollo (opcional):

Puedes instalar dependencias que solo son necesarias durante el desarrollo de tu proyecto, como herramientas de compilación, pruebas o linters, utilizando el flag --save-dev o su versión corta -D. Por ejemplo:

npm install eslint --save-dev

5. Usar dependencias en tu código:

Después de instalar una dependencia, puedes importarla o requerirla en tu código para usarla. Por ejemplo, en un archivo JavaScript:

const express = require('express');
const app = express();

// Usar express y configurar rutas, middleware, etc.

6. Actualizar dependencias:

Periodicamente, debes actualizar tus dependencias para obtener las últimas correcciones de errores y características. Puedes hacerlo con el siguiente comando:

npm update

Estos son los pasos básicos para instalar dependencias en un proyecto de Node.js utilizando NPM. A medida que tu proyecto crezca, es importante mantener tus dependencias actualizadas y gestionar cuidadosamente las versiones para garantizar la compatibilidad de tu aplicación.

Espero sea de utilidad. 👨‍💻

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

si en algún caso, no les funciona el comando cowsay, verifiquen si en wsl está instalado nodejs de no ser así se puede instalar con el comando
"sudo apt install nodejs"

🔨 Archivos del Proyecto 🔨

Pasos 📌

• • En la terminal, dentro de la carpeta npm-init, instalamos una dependencia que permite mostrar la fecha/hora en JavaScript:

npm install moment

• • También instalamos a eslint, que permite validar la sintaxis en JavaScript, se puede instalar con una flag para sea solamente usada en un entorno de desarrollo:

npm install eslint --save-dev

• • O también se puede ejecutar (vamos a ejecutar éste):

npm install eslint -D    

• • Otra dependencia que se puede instalar pero solo para producción sería (vamos a ejecutar éste):

npm install react --save

• • O de esta forma:

npm install react -S

• • Vamos VS Code, se ha agregado el archivo package-lock.json y la carpeta node-modules. Al revisar el archivo package.json, se puede observar los cambios realizados con las instalaciones que se han agregado, hasta el momento quedó así:

      {
		"name": "npm-init",
		"version": "1.0.0",
		"description": "",
		"main": "index.js",
		"scripts": {
			"test": "echo \"Error: no test specified\" && exit 1"
		},
		"keywords": [
			"javascript",
			"angular",
			"node"
		],
		"author": "Maria Rodriguez",
		"license": "MIT",
		"dependencies": {
			"moment": "^2.29.4",
			"react": "^18.2.0"
		},
		"devDependencies": {
			"eslint": "^8.41.0"
		}
	}

• • En la terminal se va a instalar paquetes globales como cowsay (permite dibujar una vaca con una frase en la terminal), éste paquete no altera o modifica al package.json del proyecto porque solo es de forma global, se ejecuta:

npm install -g cowsay

• • Para ver todas las opciones que se tiene del paquete cowsay, basta con ejecutar:

cowsay

• • Por ejemplo podemos pasarle una frase y que salga la vaca con ese mensaje:

cowsay javascript

• • Aparece:

 ____________
< javascript >
 ------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

• • Para ver los paquetes que se ha instalado en el proyecto, se ejecuta:

npm list

• • Aparece:

├── eslint@8.41.0
├── moment@2.29.4
└── react@18.2.0

• • Para ver los paquetes instalados a nivel global, se ejecuta:

npm list -g

• • Aparece:

├── corepack@0.17.0
├── cowsay@1.5.0
└── npm@9.6.7

¿Como desinstalar una dependencia?

• Desinstalar una dependencia local:

npm uninstall "nombre de la dependencia"

• Desinstalar una dependencia global:

npm uninstall "nombre de la dependencia" -g

Dependencias y dependencias de desarrollo

La siguiente sección muy relevante dentro del archivo es el listado de dependencias y el listado de dependencias de desarrollo

{

    "dependencies": {
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-hook-form": "6.14.1",
        "react-i18next": "11.8.5",
        "react-query": "^3.5.12",
        "react-router-dom": "5.2.0",
        "react-scripts": "4.0.1",
        "react-table": "^7.6.3",
        "react-virtual": "2.3.2",
        "yup": "0.32.8"
    },
		...
		...
    "devDependencies": {
        "@emotion/jest": "11.1.0",
        "@graphql-codegen/add": "2.0.2",
        "@graphql-codegen/cli": "1.20.1",
        "@graphql-codegen/introspection": "1.18.1",
        "@graphql-codegen/typescript": "1.20.2",
        "@graphql-codegen/typescript-graphql-request": "3.0.1",
        "@graphql-codegen/typescript-operations": "1.17.14",
        "@types/jest": "^26.0.20",
        "@types/node": "^12.0.0",
        "@types/react": "^16.9.53",
        "@types/react-dom": "^16.9.8",
        "@types/react-router-dom": "^5.1.7",
        "cypress": "^6.2.1",
        "eslint": "^7.17.0",
        "eslint-config-prettier": "^7.1.0",
        "eslint-plugin-prettier": "^3.3.1",
        "starwars-names": "1.6.0",
        "stylelint": "13.8.0",
        "stylelint-config-prettier": "8.0.2",
        "stylelint-prettier": "1.1.2",
        "ts-jest": "^26.4.4"
    }
}

Estas secciones, definen que paquetes disponibles en el repositorio de npm son requeridos por tu proyecto indicando también la versión necesaria. La versión mostrada aquí está en formato semver y corresponde al campo versionmencionado antes.

Estas dependencias son instaladas al ejecutar npm install <pkg> --save y en el caso de las dependencias de desarrollo utilizando npm install <pkg> --save-dev.

La diferencia de estos listados es que dependencies está destinado a ser utilizando en producción y devDependenciesdefine paquetes que son necesarios sólo durante el desarrollo de tu proyecto.

Es importante conocer cómo se definen las versiones a utilizar en estas dependencias. Cada una de ellas muestra un número basado en semver en la forma mayor.minor.patch.

• mayor: Representa una versión mayor que genera cambios en la API del producto.
• minor: Representa un valor que aumenta cuando se hacen cambios retro-compatibles.
• patch: Un valor que aumenta cada vez que se hacen reparaciones de errores o mejoras sutiles.

También es posible encontrar algunos símbolos frente a la numeración de la versión, estos son:

• ^: latest minor release. Por ejemplo ^1.0.4 indica que 1.0.4 es la versión más “baja” que se puede instalar pero permite que se instale cualquier versión superior a esa pero que se encuentre dentro de la versión 1.
• ~: latest patch release. Esta es la forma contraria a ^. Esta especificación ~1.0.4 puede instalar la versión 1.0.7 si es que esta es la ultima version del patch.

Una vez instalados los paquetes de tus dependencias la información de las versiones instaladas queda almacenada en un archivo llamado package-lock.json

Lo más usual que harás con npm es la instalación de dependencias, esto se hace mediante npm install para instalar todas las dependencias listadas en el archivo package.json o utilizando npm install <pkg> para instalar algún paquete en particular.

npm install

Este script nativo de npm tiene algunas otras opciones a la hora de hacer la instalación de paquetes.

Por defecto al ejecutar npm install <pkg> la última versión disponible en el repositorio agregando el símbolo ^ a la versión.

Al ejecutar npm install <pkg> el paquete se instalará dentro del directorio node_modules que está dentro de tu proyecto.

Puedes usar algunos parámetros tales como

• g para indicar que quieres que el paquete se instale globalmente
• -production indica que la ejecución de npm install solo instalará las dependencias listadas en el apartado dependencies dejando de lado las dependencias de desarrollo.

< javascript >
 ------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Un conocimiento del futuro para lo que quisieron instalarlo de forma local cowsay, para hacerlo funcionar deben hacer:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "cowsay": "cowsay -f dragon"
  },

Luego en la consola ponen: npm run cowsay – "Corre por tu vida"
El – significa que lo de la derecha se agregar al comando del script

 _________
/ Hola    \
\ a todos /
 ---------
        \   ^__^
         \  (OO)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

En LInux se instala diferente, porque no viene con ningún instalador.

How to install Node.js via binary archive on Linux?

1. Unzip the binary archive to any directory you wanna install Node, I use /usr/local/lib/nodejs

 VERSION=v10.15.0
 DISTRO=linux-x64
 sudo mkdir -p /usr/local/lib/nodejs
 sudo tar -xJvf node-$VERSION-$DISTRO.tar.xz -C /usr/local/lib/nodejs 

1. Set the environment variable ~/.profile, add below to the end

# Nodejs
VERSION=v10.15.0
DISTRO=linux-x64
export PATH=/usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin:$PATH

1. Refresh profile

. ~/.profile

Al querer instalar el paquete me salto este error y lo solucione así:

-> npm init install moment

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/create-install - Not found
npm ERR! 404
npm ERR! 404  'create-install@*' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Francisco\AppData\Local\npm-cache\_logs\2023-06-03T21_20_33_271Z-debug-0.log

Parece que encontraste un error al ejecutar el comando:

npm init install moment.

El mensaje de error indica que el paquete create-install no se encontró en el registro de npm.
.
Al parecer, estás intentando instalar el paquete moment utilizando el comando npm init, lo cual no es la forma correcta de instalar paquetes. El comando npm init se utiliza para inicializar un nuevo paquete de npm, no para instalar dependencias.
.
Para instalar el paquete moment, debes utilizar el comando npm install seguido del nombre del paquete.
.
Aquí tienes el comando correcto para instalar moment:

npm install moment

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

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.

😃 ❤️