Introducción
Bienvenida a NPM
Gestión de dependencias
Instalación de NPM
Instalación de NPM en MacOS
Instalación de NPM en Windows
Configuración de dependencias
Primeros pasos en NPM
Instalación de dependencias
Instalación de dependencias de versiones específicas
Comandos en NPM (Scripts)
Actualización de dependencias
Seguridad y solución de problemas
Eliminación de dependencias y Package lock
Creación y publicación de paquetes
Crear un paquete
Publicar un paquete
Versionado de paquetes y paquetes privados
Cierre
Sigue desarrollando en JavaScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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.
Para instalar una dependencia local, utiliza uno de los siguientes comandos, donde
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"
}
}
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.
Para instalar una dependencia de desarrollo, utiliza el siguiente comando, donde
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"
}
}
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.
Para instalar una dependencia global, utiliza el siguiente comando, donde
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.
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
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
Ver lista de los paquetes
Ver lista de paquetes globlales
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.
.
.
No sabia que podias instalar cowsay con NPM.
Les dejo un ejemplito muy chulo
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"cowsay": "fortune | cowsay"
},
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
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 -Dnpm install package-name —save → Instalar dependencia de producción.
npm install package-name -SLos 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)
git init
npm init
npm install dependencia
npm install dependencia -S
npm install dependencia --save
npm install dependencia -D
npm install dependencia --save-dev
Éstas no se integraran a nuesto proyecto, pero si quedaran a nuestra disposición para su uso.
npm install -g dependencia
npm list -g
Use el comando: < npm list -g | cowsay -f stegosaurus >
¿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.
😃 ❤️
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.