Administrador De Paquetes De JavaScript: Guía Completa De NPM E Yarn

Un administrador de paquetes es una herramienta que usan los desarrolladores para automatizar la búsqueda, descarga, instalación, configuración, actualización y eliminación de paquetes de un sistema.

Este artículo le mostrará todo lo que necesita para comenzar con los administradores de paquetes como NPM e Yarn.

Pero, ¿por qué exactamente necesitamos un administrador de paquetes en nuestro flujo de trabajo de desarrollo? Vamos a averiguar.

¿Por qué necesita un administrador de paquetes?

Supongamos que no hubiera administradores de paquetes. En ese caso, tendría que hacer lo siguiente manualmente:

• Encuentre todos los paquetes correctos para su proyecto
• Verifique que los paquetes no tengan vulnerabilidades conocidas
• Descarga los paquetes
• Instálelos en el lugar apropiado
• Mantenga un registro de las nuevas actualizaciones para todos sus paquetes
• Actualice cada paquete cada vez que haya una nueva versión
• Elimina los paquetes que ya no necesites

La gestión manual de decenas o cientos de paquetes es una tarea tediosa y que requiere mucho tiempo.

Por lo tanto, los administradores de paquetes, como NPM , pNPM , Bower e Yarn , ayudan a automatizar y eliminar el tedioso proceso de administrar todos sus paquetes manualmente.

Tenga en cuenta que un administrador de paquetes no es lo mismo que un registro de paquetes. Entonces, descubramos la principal diferencia.

Administrador de paquetes frente a Registro de paquetes: ¿cuál es la diferencia?

Un administrador de paquetes es una herramienta que usan los desarrolladores para buscar, descargar, instalar, configurar, actualizar y desinstalar automáticamente los paquetes de una computadora.

NPM (Node Package Manager) e Yarn (Yet Another Resource Negotiator) son dos administradores de paquetes de uso popular.

Un registro de paquetes es una base de datos (almacenamiento) para miles de paquetes (bibliotecas, complementos, marcos o herramientas).

En otras palabras, un registro de paquetes es el lugar desde el que se publican y se instalan los paquetes.

El registro de NPM y los paquetes de GitHub son dos registros de paquetes de uso popular.

Entonces, ahora que sabemos qué es un administrador de paquetes y por qué es necesario, podemos discutir cómo usar los dos populares: NPM e Yarn.

Tenga en cuenta que existen numerosos debates entre NPM y Yarn, por lo que los evitaremos aquí porque el mejor administrador de paquetes es el que mejor funciona para usted.

Por lo tanto, este artículo le mostrará cómo funcionan NPM e Yarn en lugar de decirle qué administrador de paquetes es el mejor. A continuación, depende de usted decidir cuál prefiere.

Como alternativa, puede optar por usar NPM para un proyecto específico e Yarn para otro, según el gerente que crea que es el más adecuado para el trabajo.

Entonces, sin más preámbulos, comencemos aprendiendo cómo instalar los dos administradores.

Cómo instalar el Administrador de paquetes de nodos (NPM)

NPM se instala automáticamente al instalar Node.

Por lo tanto, para instalar NPM en su sistema, vaya al sitio web de NodeJS y obtenga el último LTS de Node o la versión actual .

Cómo instalar hilo

Lo mejor es instalar Yarn a través de NPM. Entonces, primero, instale NPM desde el sitio web de Node.js.

Una vez que haya instalado NPM, proceda a instalar Yarn así:

npm install -g yarn

Cómo verificar la versión del nodo instalado

Para verificar la versión de Node.js instalada en su sistema, ejecute:

node -v

La -vbandera en el fragmento anterior es una abreviatura de --version.

Cómo comprobar la versión de NPM instalada

Para verificar la versión de NPM instalada en su sistema, ejecute:

npm -v

Cómo verificar la versión de hilo instalada

Para verificar la versión de Yarn instalada en su sistema, ejecute:

yarn -v

Cómo actualizar el administrador de paquetes de nodos

Actualice a la última versión de NPM ejecutando:

npm install npm@latest -g

Cómo actualizar NodeJS

Suponga que desea actualizar su instalación de Node.js. En ese caso, tienes dos opciones:

Opción 1: Actualizar a través del sitio web de NodeJS

Una forma de actualizar su instalación de NodeJS es descargar e instalar manualmente la última versión desde el sitio web de Node.js.

Opción 2: Actualizar a través de una herramienta de gestión de versiones

Otra forma de actualizar su instalación de NodeJS es usar un administrador de versiones como NVM , n o nvs .

Cómo actualizar hilo

Actualice a la última versión de Yarn ejecutando:

yarn set version latest

Entonces, ahora que tenemos NPM (o Yarn) en nuestra computadora, podemos comenzar a usar el administrador instalado para buscar, instalar, configurar y eliminar los paquetes de nuestro proyecto.

Pero, ¿qué es exactamente un paquete? Vamos a averiguar.

¿Qué es exactamente un paquete?

Un paquete es un directorio (o proyecto) que tiene un package.jsonarchivo que se usa para registrar información sobre él.

Nota: solo puede publicar paquetes (un proyecto descrito por un package.jsonarchivo) en el registro de NPM .

Cómo instalar paquetes

Hay dos formas de instalar un paquete: local o globalmente.

Instalación de paquetes locales

Un paquete instalado localmente es uno que puede usar solo en el proyecto en el que lo instaló.

Para instalar un paquete localmente, haga lo siguiente:

1. Navegue hasta el directorio raíz de su proyecto desde la línea de comandos.
2. Instale su paquete usando el comando de instalación NPM o Yarn a continuación (según el administrador de paquetes que haya elegido usar para su proyecto).

Nota: Debe tener Node y NPM instalados en su sistema para que funcionen los siguientes comandos de instalación de NPM (e Yarn). Puede obtener ambos instalando el último LTS o la versión actual del sitio web de Node.js.

Comando de instalación de NPM

npm install package-name --save

Tenga en cuenta que el --savecomando anterior indica a NPM que guarde package-nameel package.jsonarchivo como uno de los paquetes de los que depende el proyecto.

Suponga que desea instalar una versión exacta de un paquete. En tal caso, agregue un @[version-number]después del nombre del paquete así:

npm install package-name@4.14.1 --save

Alternativamente, si el paquete que está instalando es para fines de desarrollo y prueba, use:

npm install package-name --save-dev

Los comandos anteriores harán que NPM descargue tres elementos en el directorio raíz de su proyecto: una node_modulescarpeta, un package.jsonarchivo y un package-lock.jsonarchivo. Discutiremos estos elementos en detalle más adelante en este artículo.

Comando de instalación de hilo

yarn add package-name

Suponga que desea instalar una versión exacta de un paquete. En tal caso, agregue un @[version-number]después del nombre del paquete así:

yarn add package-name@4.14.1

Alternativamente, si el paquete que está instalando es para fines de desarrollo y prueba, use:

yarn add package-name --dev

Los comandos anteriores harán que Yarn descargue tres elementos en el directorio raíz de su proyecto: una node_modulescarpeta, un package.jsonarchivo y un yarn.lockarchivo. Discutiremos estos elementos en detalle más adelante en este artículo.

Entonces, ahora que sabemos cómo instalar un paquete localmente, podemos analizar la instalación del paquete global.

Instalación de paquetes globales

Un paquete instalado globalmente es un paquete que puede usar en cualquier parte de su sistema.

Para instalar un paquete globalmente, ejecute el siguiente código en su terminal:

npm install package-name -g

Alternativamente, puedes usar Yarn así:

yarn global add package-name

Tenga en cuenta que puede ejecutar los comandos anteriores desde cualquier ubicación de su sistema.

Instalación de paquetes local vs. global

Generalmente, es mejor instalar un paquete localmente. A continuación se muestran algunas de las diferencias entre una instalación local y una global.

Diferencia 1: Ubicación de la instalación

Un paquete instalado localmente se instala en el directorio donde ejecutó el comando npm install package-name(o ).yarn add package-name

Específicamente, encontrará los paquetes instalados localmente de un proyecto en su node_moduledirectorio.

Por el contrario, un paquete instalado globalmente se instala en una sola ubicación en su sistema. La ubicación exacta depende de la configuración de su sistema.

Diferencia 2: Versiones del paquete

Supongamos que instaló su paquete localmente. Luego, puede usar diferentes versiones del mismo paquete para el desarrollo de múltiples aplicaciones.

Sin embargo, se ve obligado a usar la misma versión del paquete para todas sus aplicaciones cuando las instala globalmente.

Diferencia 3: Actualizaciones

Una instalación local le permite elegir los paquetes del proyecto que desea actualizar a la última versión. Esto facilita la gestión de actualizaciones que rompen la compatibilidad con otros paquetes.

Sin embargo, actualizar un paquete instalado globalmente actualiza el paquete para todos los proyectos, lo que puede causar pesadillas de mantenimiento si la actualización rompe la compatibilidad con otros paquetes.

Diferencia 4: recomendación de uso

La instalación global es mejor para los paquetes que pretende usar solo en su línea de comandos, especialmente cuando proporcionan comandos ejecutables reutilizables en todos los proyectos.

Sin embargo, la instalación local es mejor para los paquetes que pretende usar en su programa, a través de la importinstrucción o la require()función.

Diferencia 5: Ejemplos

NPM , React Native CLI , Gatsby CLI , Grunt CLI y Vue CLI son ejemplos bien conocidos de paquetes globales.

Los ejemplos comunes de paquetes locales son Webpack , Lodash , Jest y MomentJS .

Nota:

• Puede realizar la instalación tanto local como global de los paquetes que pretende utilizar tanto en la línea de comandos como en su proyecto. Ejemplos típicos de este tipo de paquetes son ExpressJS y CoffeeScript .
• Su administrador de paquetes no ejecuta un paquete instalado. NPM (y Yarn) solo instalan paquetes en el node_modulesdirectorio. Y si hubiera especificado el --savecomando, su gerente agregaría detalles sobre el paquete al package.jsonarchivo.
• Para ejecutar (ejecutar) cualquier paquete ejecutable , debe hacerlo usted mismo explícitamente. Discutiremos cómo en una sección posterior de este artículo.

Pero, ¿qué son exactamente la node_modulescarpeta, package.jsonel archivo, package-lock.jsonel archivo y yarn.lockel archivo? Vamos a averiguar.

¿Qué es una node_modulescarpeta?

El directorio node_modules es la carpeta donde NPM coloca todos los paquetes que descarga localmente para su proyecto.

¿Qué es un package.jsonarchivo?

Un archivo package.json es un documento JSON que los administradores de paquetes, como NPM e Yarn, usan para almacenar información sobre un proyecto específico.

En otras palabras, un package.jsonarchivo es un archivo de metadatos de un proyecto.

Ventajas de un package.jsonarchivo

un package.jsonarchivo:

• hace posible publicar su proyecto en el registro de NPM
• facilita que otros administren e instalen su paquete
• ayuda a NPM a administrar las dependencias de un módulo fácilmente
• hace que su paquete sea reproducible y se pueda compartir con otros desarrolladores

Cómo crear un package.jsonarchivo

Vaya al directorio raíz de su proyecto e inicie la creación de un package.jsonarchivo ejecutando:

npm init

O, si su administrador de paquetes es Yarn, ejecute:

yarn init

Una vez que haya ejecutado el comando de inicialización anterior, su administrador de paquetes lo guiará a través de la creación del package.jsonarchivo haciéndole algunas preguntas sobre su proyecto.

Si desea omitir el cuestionario, puede crear un package.jsonarchivo predeterminado. Veamos cómo.

Cómo crear un package.jsonarchivo predeterminado

Suponga que prefiere omitir el cuestionario solicitado por el comando npm init(o ). yarn initEn tal caso, vaya al directorio raíz de su proyecto y ejecute:

npm init -y

O, si su administrador de paquetes es Yarn, ejecute:

yarn init -y

El comando anterior utilizará los valores predeterminados extraídos del directorio actual para crear el package.jsonarchivo de su proyecto.

Nota: La -ybandera es una abreviatura de --yes.

Una vez que su administrador de paquetes termine su proceso de inicialización, el package.jsonarchivo de su proyecto contendrá un objeto con un conjunto de propiedades.

Aquí hay un ejemplo:

{
  "name": "codesweetly-project",
  "version": "1.0.0",
  "main": "index.js"
}

Puede ver que el package.jsonarchivo anterior contiene los campos name, versiony . mainAprendamos más sobre estas propiedades a continuación.

Los package.jsoncampos de

Las package.jsonpropiedades de hacen que su proyecto sea útil para administradores de paquetes y usuarios finales.

Suponga que desea publicar su paquete en el registro de NPM. En ese caso, su package.jsonarchivo debe tener los campos "name"y ."version"

Sin embargo, si no tiene la intención de publicar su paquete, en ese caso, todos los campos, incluidas las propiedades "name"y "version", son opcionales.

Aprendamos más sobre los campos de uso común en un package.jsonarchivo.

nombre

El "name"campo es una propiedad utilizada para registrar el nombre de un proyecto.

El "name"valor de la propiedad debe ser:

• una sola palabra
• letras minúsculas
• y menor o igual a 214 caracteres

Tenga en cuenta que puede unir palabras con guiones y guiones bajos.

Aquí hay un ejemplo:

{
  "name": "code_sweetly-project"
}

versión

El "version"campo indica el número de versión actual de un proyecto.

La "version"propiedad debe tener la forma de un major.minor.patchformato. También debe seguir las pautas de control de versiones semánticas .

Aquí hay un ejemplo:

{
  "version": "1.0.0"
}

descripción

El "description"campo es una propiedad que contiene una breve descripción del propósito de un proyecto.

NPM recomienda tener una "description"propiedad para que su paquete sea más fácil de encontrar en el sitio web de NPM.

Su descripción será una de las cosas que se mostrarán cuando las personas ejecuten el npm searchcomando.

Aquí hay un ejemplo:

{
  "description": "A brief description about this package (project)"
}

principal

El "main"campo indica el punto de entrada de un proyecto .

En otras palabras, cuando alguien ejecuta la require()función, Node resolverá la invocación en require(<package.json:main>).

Aquí hay un ejemplo:

{
  "main": "./src/index.js"
}

privado

El "private"campo permite que los administradores de paquetes sepan si deben publicar su proyecto en el registro de NPM.

Aquí hay un ejemplo:

{
  "private": true
}

Si establece la "private"propiedad de su paquete.json en true, los administradores de paquetes no publicarán su proyecto.

Por lo tanto, configurar la propiedad es una excelente manera de evitar la publicación accidental de su paquete.

guiones

El "scripts"campo define los comandos de script que desea ejecutar en varios momentos del ciclo de vida de su proyecto.

Aquí hay un ejemplo:

{
  "scripts": {
    "test": "jest",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build" 
  }
}

El "scripts"campo de arriba contiene cinco propiedades cuyos valores son los comandos que queremos que nuestro administrador de paquetes ejecute cada vez que invoquemos la clave de la propiedad.

Entonces, por ejemplo, ejecutar npm run devejecutará el "webpack --mode development"comando.

palabras clave

El "keywords"campo especifica una serie de palabras clave que pueden ayudar a las personas a descubrir su paquete.

Aquí hay un ejemplo:

{
  "keywords": [
    "drag",
    "drop",
    "drag and drop",
    "dragndrop",
    "draggable" 
  ]
}

La "keywords"propiedad es parte de la información que se muestra cuando las personas ejecutan el npm searchcomando.

autor

El "author"campo enumera los detalles del autor de un proyecto.

Aquí hay un ejemplo:

{
  "author": "Oluwatobi Sofela <oluwatobiss@codesweetly.com> (https://www.codesweetly.com)"
}

También puede escribir el fragmento anterior como:

{
  "author": {
    "name": "Oluwatobi Sofela",
    "email": "oluwatobiss@codesweetly.com",
    "url": "https://www.codesweetly.com"
  }
}

Tenga en cuenta que las propiedades "email"y "url"son opcionales.

dependencias

El "dependencies"campo enumera todos los paquetes de los que depende un proyecto en producción.

Aquí hay un ejemplo:

{
  "dependencies": {
    "first-package": "^1.0.4",
    "second-package": "~2.1.3"
  }
}

Por lo tanto, cada vez que un usuario instala su proyecto desde el registro de NPM, la propiedad de dependencias garantiza que los administradores de paquetes puedan encontrar e instalar automáticamente los paquetes enumerados.

Tenga en cuenta que puede agregar un paquete al "dependencies"campo a través de cualquiera de las siguientes formas:

• Agregue manualmente el nombre y la versión semántica de cada paquete del que depende su proyecto en producción.
• Ejecute el npm install package-name --save-prodcomando en su terminal. O yarn add package-namesi Yarn es su administrador de paquetes.

devDependencias

El "devDependencies"campo enumera todos los paquetes que un proyecto no necesita en producción, pero requiere para su desarrollo local y fines de prueba.

Aquí hay un ejemplo:

{
  "devDependencies": {
    "first-dev-package": "^5.8.1",
    "second-dev-package": "3.2.2—4.0.0"
  }
}

Tenga en cuenta que los paquetes enumerados en el "devDependencies"campo estarán disponibles en el entorno de desarrollo del proyecto, pero no en su servidor de producción.

Supongamos que un usuario instala el proyecto mediante el comando npm install(o ). yarn addEn tal caso, el administrador de paquetes encontrará y descargará todos los listados devDependenciesen el directorio del proyecto node_modules.

Tenga en cuenta que puede agregar un paquete al "devDependencies"campo a través de cualquiera de las siguientes formas:

• Agregue manualmente el nombre y la versión semántica de cada paquete del que depende su proyecto para su desarrollo y pruebas.
• Ejecute el npm install package-name --save-devcomando en su terminal. O yarn add package-name --devsi Yarn es su administrador de paquetes.

página principal

El "homepage"campo especifica la URL de la página de inicio de su proyecto.

Aquí hay un ejemplo:

{
  "homepage": "https://codesweetly.com/package-json-file-explained"
}

Entonces, ahora que sabemos qué package.jsones un archivo, podemos discutir package-lock.json.

¿Qué es un package-lock.jsonarchivo?

El archivo package-lock.json es un documento que NPM usa para registrar la versión exacta de todos los paquetes que ha instalado localmente en el node_modulesdirectorio de su proyecto.

Un package-lock.jsonarchivo hace que una aplicación sea 100 % reproducible de la forma exacta en que la publicaste en el registro de NPM.

Entonces, suponga que un usuario clona su aplicación y ejecuta el npm installcomando. En tal caso, package-lock.jsonasegura que el usuario descargue la versión exacta de los paquetes que utilizó para desarrollar la aplicación.

Por ejemplo, supongamos que un usuario clonó su aplicación que no contiene ningún package-lock.json archivo y una dependencia utilizada en la aplicación tiene una versión más nueva.

Supongamos que el número de versión de la dependencia en el package.jsonarchivo tiene un signo de intercalación (por ejemplo, ^2.6.2). En ese caso, NPM instalará la versión secundaria más reciente de la dependencia, lo que podría provocar que la aplicación produzca resultados erróneos.

Sin embargo, suponga que el usuario clonó su aplicación que contiene un package-lock.jsonarchivo. En ese caso, NPM instalará la versión exacta de la dependencia registrada en el package-lock.jsonarchivo, independientemente de si existe una versión más reciente.

Por lo tanto, los usuarios siempre obtendrán su aplicación de la manera precisa en que la publicó en el registro de NPM.

En otras palabras, NPM usa el package-lock.jsonarchivo para bloquear las dependencias de su paquete a los números de versión específicos que usó para el desarrollo del proyecto.

Nota: NPM actualizará los paquetes registrados en el package-lock.jsonarchivo cada vez que ejecute el npm updatecomando.

¿Qué es un yarn.lockarchivo?

El yarn.lockarchivo es un documento que Yarn usa para registrar la versión exacta de todos los paquetes que ha instalado localmente en el node_modulesdirectorio de su proyecto.

El yarn.lockarchivo es comparable al archivo de bloqueo package-lock.json de NPM .

Anteriormente mencionamos que su administrador de paquetes no ejecuta un paquete instalado; debe hacerlo usted mismo explícitamente. Discutamos cómo.

Cómo ejecutar un paquete ejecutable

Hay varias formas de ejecutar un paquete ejecutable. A continuación se muestran las técnicas estándar.

Ubique y ejecute manualmente el paquete

Una forma de ejecutar un paquete ejecutable es escribir su ruta local en la línea de comandos de la siguiente manera:

./node_modules/.bin/package-name

Agregue el paquete al scriptscampo de package.json

Una forma alternativa de ejecutar un paquete es agregarlo primero al "scripts"campo del archivo package.json de su proyecto de esta manera:

{
  "name": "your_package",
  "version": "1.0.0",
  "scripts": {
    "desired-name": "name-of-package-to-execute"
  }
}

Luego, puede ejecutar el paquete así:

npm run desired-name

Tenga en cuenta que el comando anterior es una abreviatura de npm run-script desired-name.

Alternativamente, puede ejecutar el paquete con Yarn así:

yarn run desired-name

Aquí hay un ejemplo:

{
  "name": "codesweetly-app",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack",
  }
}

El fragmento anterior agregó un paquete web a su package.jsoncampo "scripts". Entonces, ahora podemos ejecutar webpacken la línea de comando de esta manera:

npm run build

O, si su administrador de paquetes es Yarn, puede ejecutar un paquete web como este:

yarn run build

Usar NPX

Una forma más rápida de ejecutar un paquete ejecutable es usar NPX así:

npx package-name

Con NPX, ya no necesita agregar su paquete al "scripts"campo del package.jsonarchivo de su proyecto.

NPX (Node Package Execute) es un ejecutor de paquetes de Node que busca y ejecuta automáticamente un paquete específico.

Aquí hay un ejemplo:

npx webpack

El comando anterior encontrará y ejecutará automáticamente webpack . Por lo tanto, no necesitamos agregar la "build": "webpack"propiedad al "scripts"campo de nuestro package.jsonarchivo.

Nota: NPX se instala automáticamente cuando instala Node 8.2/NPM 5.2.0 o superior.

También puede ejecutar código con su versión preferida de Node.js. Averigüemos cómo.

Cómo ejecutar código usando su versión preferida de Node.js

Puede usar el @carácter y el paquete node npm para especificar la versión de Node.js que desea usar para ejecutar su código.

Aquí hay un ejemplo:

npx node@7 index.js

El fragmento anterior le dice a NPX que se ejecute index.jscon la última versión de Node desde la versión 7 principal.

Usar el node@comando es una forma útil de evitar el uso de herramientas de administración de versiones de Node.js como nvm para cambiar entre versiones de Node.

Suponga que desea confirmar la versión de nodo que utilizará NPX para ejecutar su código. En ese caso, ejecuta:

npx node@7 -v

El fragmento anterior mostrará la última versión de Node de la versión 7 principal que NPX usará para ejecutar su código, por ejemplo, v7.10.1.

Cómo buscar paquetes locales obsoletos

Para determinar si alguno de los paquetes de su proyecto está desactualizado, ejecute:

npm outdated

Si el comando no genera nada, significa que todos los paquetes de su proyecto están actualizados.

De lo contrario, consulte este artículo obsoleto de npm para obtener una explicación detallada de la salida del comando.

Alternativamente, puedes usar Yarn así:

yarn outdated

Nota: para verificar el estado desactualizado de un paquete específico, agregue el nombre del paquete después de la outdatedpalabra clave, por ejemplo, npm outdated lodash.

Cómo buscar paquetes globales obsoletos

Para confirmar qué paquete global está desactualizado, ejecute:

npm outdated -g --depth=0

Cómo buscar paquetes instalados localmente

Aquí hay tres formas de verificar los paquetes instalados localmente:

Paquetes instalados localmente y sus dependencias

npm list

O usa Yarn así:

yarn list

Paquetes instalados localmente, sin sus dependencias

npm list --depth=0

O,

yarn list --depth=0

Compruebe si un paquete específico se instaló localmente

npm list package-name

Cómo buscar paquetes instalados globalmente

Aquí hay tres formas de verificar los paquetes instalados globalmente:

Paquetes instalados globalmente y sus dependencias

npm list -g

O usa Yarn así:

yarn list -g

Paquetes instalados globalmente, sin sus dependencias

npm list -g --depth=0

O,

yarn list -g --depth=0

Compruebe si un paquete específico se instaló globalmente

npm list -g package-name

Cómo actualizar paquetes

Aquí se explica cómo actualizar paquetes con NPM e Yarn:

Cómo actualizar un paquete específico a su última versión

npm update package-name

O, para proyectos administrados con Yarn, ejecute:

yarn upgrade package-name

Cómo actualizar todos los paquetes instalados localmente de un proyecto

npm update

O,

yarn upgrade

Cómo actualizar un paquete específico instalado globalmente

Puede actualizar un paquete instalado globalmente como este:

npm update package-name -g

Cómo actualizar todos los paquetes instalados globalmente de su sistema

npm update -g

Cómo desinstalar paquetes

Aquí se explica cómo desinstalar paquetes con NPM e Yarn:

Cómo desinstalar un paquete de un proyecto específico

Primero, navegue hasta el directorio raíz del proyecto desde la línea de comando y ejecute:

npm uninstall package-name

Nota:

• Agregue el indicador -S(o --save) para eliminar las referencias al paquete en el dependenciescampo del package.jsonarchivo del proyecto.
• Agregue el indicador -D(o --save-dev) para eliminar las referencias al paquete en el devDependenciescampo del package.jsonarchivo del proyecto.

Para proyectos administrados con Yarn, ejecute:

yarn remove package-name

Nota: El yarn removecomando actualizará automáticamente los archivos package.jsony el proyecto.yarn.lock

Cómo desinstalar un paquete global

npm uninstall package-name -g

Tenga en cuenta que es una buena práctica no eliminar paquetes manualmente de la node_modulescarpeta, ya que tal acción puede afectar a otros módulos dependiendo de ella.

Pero, ¿qué es exactamente un módulo en NodeJS? Averigüémoslo a continuación.

¿Qué es exactamente un módulo en NodeJS?

Un módulo en NodeJS es cualquier archivo en la node_modulescarpeta que la computadora puede cargar a través de la función de Node require().

Aquí hay un ejemplo:

const myModule = require("./codesweetly.js");

Suponga que la computadora usó con éxito la require()función para cargar el codesweetly.jsarchivo. En tal caso, significa que codesweetly.jses un módulo asignado a la myModulevariable.

Tenga en cuenta que un módulo también puede ser un paquete, pero no siempre.

Un módulo no es un paquete si no tiene un package.jsonarchivo utilizado para registrar información sobre él.

Además, tenga en cuenta que para que la función pueda cargar un módulo require(), el módulo debe ser uno de los siguientes:

• Un paquete, cuyo package.jsonarchivo contiene un "main"campo.
• Un archivo JavaScript.

Cómo publicar su proyecto en el registro de NPM

NPM es un registro gratuito para autores de paquetes públicos .

Entonces, puede usarlo para publicar cualquier proyecto (carpeta) desde su computadora que tenga un package.jsonarchivo.

A continuación se detallan los pasos necesarios para compartir su paquete con el mundo.

Paso 1: Inicie sesión o regístrese

Vaya al sitio web de NPM e inicie sesión (o regístrese si aún no tiene una cuenta).

Nota: asegúrese de verificar su correo electrónico después de crear una nueva cuenta. De lo contrario, obtendrá un 403 Forbiddenerror al publicar su paquete.

Paso 2: Iniciar sesión

Inicie sesión en su cuenta de NPM desde la línea de comandos de la siguiente manera:

npm login

Nota: Puede usar el npm whoamicomando para verificar si está conectado actualmente.

Paso 3: ¡Publique su paquete!

Vaya al directorio raíz de su proyecto y publíquelo así:

npm publish

Asegúrese de que el nombre de su paquete no exista actualmente en NPM. De lo contrario, obtendrá un error durante la publicación.

Puede usar el npm searchcomando (o la barra de búsqueda del sitio web de NPM ) para buscar si el nombre que desea usar ya existe en NPM.

Supongamos que ya se han tomado todos los nombres adecuados para su paquete. En ese caso, NPM le permite publicar su proyecto como un alcance.

En otras palabras, puede publicar su paquete como una subsección de su nombre de usuario. Veamos cómo a continuación.

Cómo publicar su paquete como un alcance de su nombre de usuario

Abra su package.jsonarchivo y prefije el nombre de su paquete con su nombre de usuario.

Aquí hay un ejemplo:

{
  "name": "@username/package-name",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

La configuración predeterminada de NPM asume que un paquete de nombres con ámbito es un proyecto privado. Por lo tanto, obtendrá un error si usa el npm publishcomando para compartir un paquete de nombre con ámbito.

Por lo tanto, para publicar su paquete como ámbito de su nombre de usuario, agregue la --access=publicbandera al npm publishcomando:

npm publish --access=public

Nota: puede convertir su proyecto en un paquete con ámbito durante el proceso de inicialización utilizando el npm init --scope=usernamecomando en lugar de npm init.

Visión de conjunto

Este artículo discutió qué es un administrador de paquetes. También analizamos cómo funcionan dos administradores de paquetes populares (NPM e Yarn).

¡Gracias por leer!

Fuente: https://www.freecodecamp.org/news/javascript-package-manager-npm-and-yarn/

#npm #yarn 

What is GEEK

Buddha Community

Administrador De Paquetes De JavaScript: Guía Completa De NPM E Yarn

Un administrador de paquetes es una herramienta que usan los desarrolladores para automatizar la búsqueda, descarga, instalación, configuración, actualización y eliminación de paquetes de un sistema.

Este artículo le mostrará todo lo que necesita para comenzar con los administradores de paquetes como NPM e Yarn.

Pero, ¿por qué exactamente necesitamos un administrador de paquetes en nuestro flujo de trabajo de desarrollo? Vamos a averiguar.

¿Por qué necesita un administrador de paquetes?

Supongamos que no hubiera administradores de paquetes. En ese caso, tendría que hacer lo siguiente manualmente:

• Encuentre todos los paquetes correctos para su proyecto
• Verifique que los paquetes no tengan vulnerabilidades conocidas
• Descarga los paquetes
• Instálelos en el lugar apropiado
• Mantenga un registro de las nuevas actualizaciones para todos sus paquetes
• Actualice cada paquete cada vez que haya una nueva versión
• Elimina los paquetes que ya no necesites

La gestión manual de decenas o cientos de paquetes es una tarea tediosa y que requiere mucho tiempo.

Por lo tanto, los administradores de paquetes, como NPM , pNPM , Bower e Yarn , ayudan a automatizar y eliminar el tedioso proceso de administrar todos sus paquetes manualmente.

Tenga en cuenta que un administrador de paquetes no es lo mismo que un registro de paquetes. Entonces, descubramos la principal diferencia.

Administrador de paquetes frente a Registro de paquetes: ¿cuál es la diferencia?

Un administrador de paquetes es una herramienta que usan los desarrolladores para buscar, descargar, instalar, configurar, actualizar y desinstalar automáticamente los paquetes de una computadora.

NPM (Node Package Manager) e Yarn (Yet Another Resource Negotiator) son dos administradores de paquetes de uso popular.

Un registro de paquetes es una base de datos (almacenamiento) para miles de paquetes (bibliotecas, complementos, marcos o herramientas).

En otras palabras, un registro de paquetes es el lugar desde el que se publican y se instalan los paquetes.

El registro de NPM y los paquetes de GitHub son dos registros de paquetes de uso popular.

Entonces, ahora que sabemos qué es un administrador de paquetes y por qué es necesario, podemos discutir cómo usar los dos populares: NPM e Yarn.

Tenga en cuenta que existen numerosos debates entre NPM y Yarn, por lo que los evitaremos aquí porque el mejor administrador de paquetes es el que mejor funciona para usted.

Por lo tanto, este artículo le mostrará cómo funcionan NPM e Yarn en lugar de decirle qué administrador de paquetes es el mejor. A continuación, depende de usted decidir cuál prefiere.

Como alternativa, puede optar por usar NPM para un proyecto específico e Yarn para otro, según el gerente que crea que es el más adecuado para el trabajo.

Entonces, sin más preámbulos, comencemos aprendiendo cómo instalar los dos administradores.

Cómo instalar el Administrador de paquetes de nodos (NPM)

NPM se instala automáticamente al instalar Node.

Por lo tanto, para instalar NPM en su sistema, vaya al sitio web de NodeJS y obtenga el último LTS de Node o la versión actual .

Cómo instalar hilo

Lo mejor es instalar Yarn a través de NPM. Entonces, primero, instale NPM desde el sitio web de Node.js.

Una vez que haya instalado NPM, proceda a instalar Yarn así:

npm install -g yarn

Cómo verificar la versión del nodo instalado

Para verificar la versión de Node.js instalada en su sistema, ejecute:

node -v

La -vbandera en el fragmento anterior es una abreviatura de --version.

Cómo comprobar la versión de NPM instalada

Para verificar la versión de NPM instalada en su sistema, ejecute:

npm -v

Cómo verificar la versión de hilo instalada

Para verificar la versión de Yarn instalada en su sistema, ejecute:

yarn -v

Cómo actualizar el administrador de paquetes de nodos

Actualice a la última versión de NPM ejecutando:

npm install npm@latest -g

Cómo actualizar NodeJS

Suponga que desea actualizar su instalación de Node.js. En ese caso, tienes dos opciones:

Opción 1: Actualizar a través del sitio web de NodeJS

Una forma de actualizar su instalación de NodeJS es descargar e instalar manualmente la última versión desde el sitio web de Node.js.

Opción 2: Actualizar a través de una herramienta de gestión de versiones

Otra forma de actualizar su instalación de NodeJS es usar un administrador de versiones como NVM , n o nvs .

Cómo actualizar hilo

Actualice a la última versión de Yarn ejecutando:

yarn set version latest

Entonces, ahora que tenemos NPM (o Yarn) en nuestra computadora, podemos comenzar a usar el administrador instalado para buscar, instalar, configurar y eliminar los paquetes de nuestro proyecto.

Pero, ¿qué es exactamente un paquete? Vamos a averiguar.

¿Qué es exactamente un paquete?

Un paquete es un directorio (o proyecto) que tiene un package.jsonarchivo que se usa para registrar información sobre él.

Nota: solo puede publicar paquetes (un proyecto descrito por un package.jsonarchivo) en el registro de NPM .

Cómo instalar paquetes

Hay dos formas de instalar un paquete: local o globalmente.

Instalación de paquetes locales

Un paquete instalado localmente es uno que puede usar solo en el proyecto en el que lo instaló.

Para instalar un paquete localmente, haga lo siguiente:

1. Navegue hasta el directorio raíz de su proyecto desde la línea de comandos.
2. Instale su paquete usando el comando de instalación NPM o Yarn a continuación (según el administrador de paquetes que haya elegido usar para su proyecto).

Nota: Debe tener Node y NPM instalados en su sistema para que funcionen los siguientes comandos de instalación de NPM (e Yarn). Puede obtener ambos instalando el último LTS o la versión actual del sitio web de Node.js.

Comando de instalación de NPM

npm install package-name --save

Tenga en cuenta que el --savecomando anterior indica a NPM que guarde package-nameel package.jsonarchivo como uno de los paquetes de los que depende el proyecto.

Suponga que desea instalar una versión exacta de un paquete. En tal caso, agregue un @[version-number]después del nombre del paquete así:

npm install package-name@4.14.1 --save

Alternativamente, si el paquete que está instalando es para fines de desarrollo y prueba, use:

npm install package-name --save-dev

Los comandos anteriores harán que NPM descargue tres elementos en el directorio raíz de su proyecto: una node_modulescarpeta, un package.jsonarchivo y un package-lock.jsonarchivo. Discutiremos estos elementos en detalle más adelante en este artículo.

Comando de instalación de hilo

yarn add package-name

Suponga que desea instalar una versión exacta de un paquete. En tal caso, agregue un @[version-number]después del nombre del paquete así:

yarn add package-name@4.14.1

Alternativamente, si el paquete que está instalando es para fines de desarrollo y prueba, use:

yarn add package-name --dev

Los comandos anteriores harán que Yarn descargue tres elementos en el directorio raíz de su proyecto: una node_modulescarpeta, un package.jsonarchivo y un yarn.lockarchivo. Discutiremos estos elementos en detalle más adelante en este artículo.

Entonces, ahora que sabemos cómo instalar un paquete localmente, podemos analizar la instalación del paquete global.

Instalación de paquetes globales

Un paquete instalado globalmente es un paquete que puede usar en cualquier parte de su sistema.

Para instalar un paquete globalmente, ejecute el siguiente código en su terminal:

npm install package-name -g

Alternativamente, puedes usar Yarn así:

yarn global add package-name

Tenga en cuenta que puede ejecutar los comandos anteriores desde cualquier ubicación de su sistema.

Instalación de paquetes local vs. global

Generalmente, es mejor instalar un paquete localmente. A continuación se muestran algunas de las diferencias entre una instalación local y una global.

Diferencia 1: Ubicación de la instalación

Un paquete instalado localmente se instala en el directorio donde ejecutó el comando npm install package-name(o ).yarn add package-name

Específicamente, encontrará los paquetes instalados localmente de un proyecto en su node_moduledirectorio.

Por el contrario, un paquete instalado globalmente se instala en una sola ubicación en su sistema. La ubicación exacta depende de la configuración de su sistema.

Diferencia 2: Versiones del paquete

Supongamos que instaló su paquete localmente. Luego, puede usar diferentes versiones del mismo paquete para el desarrollo de múltiples aplicaciones.

Sin embargo, se ve obligado a usar la misma versión del paquete para todas sus aplicaciones cuando las instala globalmente.

Diferencia 3: Actualizaciones

Una instalación local le permite elegir los paquetes del proyecto que desea actualizar a la última versión. Esto facilita la gestión de actualizaciones que rompen la compatibilidad con otros paquetes.

Sin embargo, actualizar un paquete instalado globalmente actualiza el paquete para todos los proyectos, lo que puede causar pesadillas de mantenimiento si la actualización rompe la compatibilidad con otros paquetes.

Diferencia 4: recomendación de uso

La instalación global es mejor para los paquetes que pretende usar solo en su línea de comandos, especialmente cuando proporcionan comandos ejecutables reutilizables en todos los proyectos.

Sin embargo, la instalación local es mejor para los paquetes que pretende usar en su programa, a través de la importinstrucción o la require()función.

Diferencia 5: Ejemplos

NPM , React Native CLI , Gatsby CLI , Grunt CLI y Vue CLI son ejemplos bien conocidos de paquetes globales.

Los ejemplos comunes de paquetes locales son Webpack , Lodash , Jest y MomentJS .

Nota:

• Puede realizar la instalación tanto local como global de los paquetes que pretende utilizar tanto en la línea de comandos como en su proyecto. Ejemplos típicos de este tipo de paquetes son ExpressJS y CoffeeScript .
• Su administrador de paquetes no ejecuta un paquete instalado. NPM (y Yarn) solo instalan paquetes en el node_modulesdirectorio. Y si hubiera especificado el --savecomando, su gerente agregaría detalles sobre el paquete al package.jsonarchivo.
• Para ejecutar (ejecutar) cualquier paquete ejecutable , debe hacerlo usted mismo explícitamente. Discutiremos cómo en una sección posterior de este artículo.

Pero, ¿qué son exactamente la node_modulescarpeta, package.jsonel archivo, package-lock.jsonel archivo y yarn.lockel archivo? Vamos a averiguar.

¿Qué es una node_modulescarpeta?

El directorio node_modules es la carpeta donde NPM coloca todos los paquetes que descarga localmente para su proyecto.

¿Qué es un package.jsonarchivo?

Un archivo package.json es un documento JSON que los administradores de paquetes, como NPM e Yarn, usan para almacenar información sobre un proyecto específico.

En otras palabras, un package.jsonarchivo es un archivo de metadatos de un proyecto.

Ventajas de un package.jsonarchivo

un package.jsonarchivo:

• hace posible publicar su proyecto en el registro de NPM
• facilita que otros administren e instalen su paquete
• ayuda a NPM a administrar las dependencias de un módulo fácilmente
• hace que su paquete sea reproducible y se pueda compartir con otros desarrolladores

Cómo crear un package.jsonarchivo

Vaya al directorio raíz de su proyecto e inicie la creación de un package.jsonarchivo ejecutando:

npm init

O, si su administrador de paquetes es Yarn, ejecute:

yarn init

Una vez que haya ejecutado el comando de inicialización anterior, su administrador de paquetes lo guiará a través de la creación del package.jsonarchivo haciéndole algunas preguntas sobre su proyecto.

Si desea omitir el cuestionario, puede crear un package.jsonarchivo predeterminado. Veamos cómo.

Cómo crear un package.jsonarchivo predeterminado

Suponga que prefiere omitir el cuestionario solicitado por el comando npm init(o ). yarn initEn tal caso, vaya al directorio raíz de su proyecto y ejecute:

npm init -y

O, si su administrador de paquetes es Yarn, ejecute:

yarn init -y

El comando anterior utilizará los valores predeterminados extraídos del directorio actual para crear el package.jsonarchivo de su proyecto.

Nota: La -ybandera es una abreviatura de --yes.

Una vez que su administrador de paquetes termine su proceso de inicialización, el package.jsonarchivo de su proyecto contendrá un objeto con un conjunto de propiedades.

Aquí hay un ejemplo:

{
  "name": "codesweetly-project",
  "version": "1.0.0",
  "main": "index.js"
}

Puede ver que el package.jsonarchivo anterior contiene los campos name, versiony . mainAprendamos más sobre estas propiedades a continuación.

Los package.jsoncampos de

Las package.jsonpropiedades de hacen que su proyecto sea útil para administradores de paquetes y usuarios finales.

Suponga que desea publicar su paquete en el registro de NPM. En ese caso, su package.jsonarchivo debe tener los campos "name"y ."version"

Sin embargo, si no tiene la intención de publicar su paquete, en ese caso, todos los campos, incluidas las propiedades "name"y "version", son opcionales.

Aprendamos más sobre los campos de uso común en un package.jsonarchivo.

nombre

El "name"campo es una propiedad utilizada para registrar el nombre de un proyecto.

El "name"valor de la propiedad debe ser:

• una sola palabra
• letras minúsculas
• y menor o igual a 214 caracteres

Tenga en cuenta que puede unir palabras con guiones y guiones bajos.

Aquí hay un ejemplo:

{
  "name": "code_sweetly-project"
}

versión

El "version"campo indica el número de versión actual de un proyecto.

La "version"propiedad debe tener la forma de un major.minor.patchformato. También debe seguir las pautas de control de versiones semánticas .

Aquí hay un ejemplo:

{
  "version": "1.0.0"
}

descripción

El "description"campo es una propiedad que contiene una breve descripción del propósito de un proyecto.

NPM recomienda tener una "description"propiedad para que su paquete sea más fácil de encontrar en el sitio web de NPM.

Su descripción será una de las cosas que se mostrarán cuando las personas ejecuten el npm searchcomando.

Aquí hay un ejemplo:

{
  "description": "A brief description about this package (project)"
}

principal

El "main"campo indica el punto de entrada de un proyecto .

En otras palabras, cuando alguien ejecuta la require()función, Node resolverá la invocación en require(<package.json:main>).

Aquí hay un ejemplo:

{
  "main": "./src/index.js"
}

privado

El "private"campo permite que los administradores de paquetes sepan si deben publicar su proyecto en el registro de NPM.

Aquí hay un ejemplo:

{
  "private": true
}

Si establece la "private"propiedad de su paquete.json en true, los administradores de paquetes no publicarán su proyecto.

Por lo tanto, configurar la propiedad es una excelente manera de evitar la publicación accidental de su paquete.

guiones

El "scripts"campo define los comandos de script que desea ejecutar en varios momentos del ciclo de vida de su proyecto.

Aquí hay un ejemplo:

{
  "scripts": {
    "test": "jest",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build" 
  }
}

El "scripts"campo de arriba contiene cinco propiedades cuyos valores son los comandos que queremos que nuestro administrador de paquetes ejecute cada vez que invoquemos la clave de la propiedad.

Entonces, por ejemplo, ejecutar npm run devejecutará el "webpack --mode development"comando.

palabras clave

El "keywords"campo especifica una serie de palabras clave que pueden ayudar a las personas a descubrir su paquete.

Aquí hay un ejemplo:

{
  "keywords": [
    "drag",
    "drop",
    "drag and drop",
    "dragndrop",
    "draggable" 
  ]
}

La "keywords"propiedad es parte de la información que se muestra cuando las personas ejecutan el npm searchcomando.

autor

El "author"campo enumera los detalles del autor de un proyecto.

Aquí hay un ejemplo:

{
  "author": "Oluwatobi Sofela <oluwatobiss@codesweetly.com> (https://www.codesweetly.com)"
}

También puede escribir el fragmento anterior como:

{
  "author": {
    "name": "Oluwatobi Sofela",
    "email": "oluwatobiss@codesweetly.com",
    "url": "https://www.codesweetly.com"
  }
}

Tenga en cuenta que las propiedades "email"y "url"son opcionales.

dependencias

El "dependencies"campo enumera todos los paquetes de los que depende un proyecto en producción.

Aquí hay un ejemplo:

{
  "dependencies": {
    "first-package": "^1.0.4",
    "second-package": "~2.1.3"
  }
}

Por lo tanto, cada vez que un usuario instala su proyecto desde el registro de NPM, la propiedad de dependencias garantiza que los administradores de paquetes puedan encontrar e instalar automáticamente los paquetes enumerados.

Tenga en cuenta que puede agregar un paquete al "dependencies"campo a través de cualquiera de las siguientes formas:

• Agregue manualmente el nombre y la versión semántica de cada paquete del que depende su proyecto en producción.
• Ejecute el npm install package-name --save-prodcomando en su terminal. O yarn add package-namesi Yarn es su administrador de paquetes.

devDependencias

El "devDependencies"campo enumera todos los paquetes que un proyecto no necesita en producción, pero requiere para su desarrollo local y fines de prueba.

Aquí hay un ejemplo:

{
  "devDependencies": {
    "first-dev-package": "^5.8.1",
    "second-dev-package": "3.2.2—4.0.0"
  }
}

Tenga en cuenta que los paquetes enumerados en el "devDependencies"campo estarán disponibles en el entorno de desarrollo del proyecto, pero no en su servidor de producción.

Supongamos que un usuario instala el proyecto mediante el comando npm install(o ). yarn addEn tal caso, el administrador de paquetes encontrará y descargará todos los listados devDependenciesen el directorio del proyecto node_modules.

Tenga en cuenta que puede agregar un paquete al "devDependencies"campo a través de cualquiera de las siguientes formas:

• Agregue manualmente el nombre y la versión semántica de cada paquete del que depende su proyecto para su desarrollo y pruebas.
• Ejecute el npm install package-name --save-devcomando en su terminal. O yarn add package-name --devsi Yarn es su administrador de paquetes.

página principal

El "homepage"campo especifica la URL de la página de inicio de su proyecto.

Aquí hay un ejemplo:

{
  "homepage": "https://codesweetly.com/package-json-file-explained"
}

Entonces, ahora que sabemos qué package.jsones un archivo, podemos discutir package-lock.json.

¿Qué es un package-lock.jsonarchivo?

El archivo package-lock.json es un documento que NPM usa para registrar la versión exacta de todos los paquetes que ha instalado localmente en el node_modulesdirectorio de su proyecto.

Un package-lock.jsonarchivo hace que una aplicación sea 100 % reproducible de la forma exacta en que la publicaste en el registro de NPM.

Entonces, suponga que un usuario clona su aplicación y ejecuta el npm installcomando. En tal caso, package-lock.jsonasegura que el usuario descargue la versión exacta de los paquetes que utilizó para desarrollar la aplicación.

Por ejemplo, supongamos que un usuario clonó su aplicación que no contiene ningún package-lock.json archivo y una dependencia utilizada en la aplicación tiene una versión más nueva.

Supongamos que el número de versión de la dependencia en el package.jsonarchivo tiene un signo de intercalación (por ejemplo, ^2.6.2). En ese caso, NPM instalará la versión secundaria más reciente de la dependencia, lo que podría provocar que la aplicación produzca resultados erróneos.

Sin embargo, suponga que el usuario clonó su aplicación que contiene un package-lock.jsonarchivo. En ese caso, NPM instalará la versión exacta de la dependencia registrada en el package-lock.jsonarchivo, independientemente de si existe una versión más reciente.

Por lo tanto, los usuarios siempre obtendrán su aplicación de la manera precisa en que la publicó en el registro de NPM.

En otras palabras, NPM usa el package-lock.jsonarchivo para bloquear las dependencias de su paquete a los números de versión específicos que usó para el desarrollo del proyecto.

Nota: NPM actualizará los paquetes registrados en el package-lock.jsonarchivo cada vez que ejecute el npm updatecomando.

¿Qué es un yarn.lockarchivo?

El yarn.lockarchivo es un documento que Yarn usa para registrar la versión exacta de todos los paquetes que ha instalado localmente en el node_modulesdirectorio de su proyecto.

El yarn.lockarchivo es comparable al archivo de bloqueo package-lock.json de NPM .

Anteriormente mencionamos que su administrador de paquetes no ejecuta un paquete instalado; debe hacerlo usted mismo explícitamente. Discutamos cómo.

Cómo ejecutar un paquete ejecutable

Hay varias formas de ejecutar un paquete ejecutable. A continuación se muestran las técnicas estándar.

Ubique y ejecute manualmente el paquete

Una forma de ejecutar un paquete ejecutable es escribir su ruta local en la línea de comandos de la siguiente manera:

./node_modules/.bin/package-name

Agregue el paquete al scriptscampo de package.json

Una forma alternativa de ejecutar un paquete es agregarlo primero al "scripts"campo del archivo package.json de su proyecto de esta manera:

{
  "name": "your_package",
  "version": "1.0.0",
  "scripts": {
    "desired-name": "name-of-package-to-execute"
  }
}

Luego, puede ejecutar el paquete así:

npm run desired-name

Tenga en cuenta que el comando anterior es una abreviatura de npm run-script desired-name.

Alternativamente, puede ejecutar el paquete con Yarn así:

yarn run desired-name

Aquí hay un ejemplo:

{
  "name": "codesweetly-app",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack",
  }
}

El fragmento anterior agregó un paquete web a su package.jsoncampo "scripts". Entonces, ahora podemos ejecutar webpacken la línea de comando de esta manera:

npm run build

O, si su administrador de paquetes es Yarn, puede ejecutar un paquete web como este:

yarn run build

Usar NPX

Una forma más rápida de ejecutar un paquete ejecutable es usar NPX así:

npx package-name

Con NPX, ya no necesita agregar su paquete al "scripts"campo del package.jsonarchivo de su proyecto.

NPX (Node Package Execute) es un ejecutor de paquetes de Node que busca y ejecuta automáticamente un paquete específico.

Aquí hay un ejemplo:

npx webpack

El comando anterior encontrará y ejecutará automáticamente webpack . Por lo tanto, no necesitamos agregar la "build": "webpack"propiedad al "scripts"campo de nuestro package.jsonarchivo.

Nota: NPX se instala automáticamente cuando instala Node 8.2/NPM 5.2.0 o superior.

También puede ejecutar código con su versión preferida de Node.js. Averigüemos cómo.

Cómo ejecutar código usando su versión preferida de Node.js

Puede usar el @carácter y el paquete node npm para especificar la versión de Node.js que desea usar para ejecutar su código.

Aquí hay un ejemplo:

npx node@7 index.js

El fragmento anterior le dice a NPX que se ejecute index.jscon la última versión de Node desde la versión 7 principal.

Usar el node@comando es una forma útil de evitar el uso de herramientas de administración de versiones de Node.js como nvm para cambiar entre versiones de Node.

Suponga que desea confirmar la versión de nodo que utilizará NPX para ejecutar su código. En ese caso, ejecuta:

npx node@7 -v

El fragmento anterior mostrará la última versión de Node de la versión 7 principal que NPX usará para ejecutar su código, por ejemplo, v7.10.1.

Cómo buscar paquetes locales obsoletos

Para determinar si alguno de los paquetes de su proyecto está desactualizado, ejecute:

npm outdated

Si el comando no genera nada, significa que todos los paquetes de su proyecto están actualizados.

De lo contrario, consulte este artículo obsoleto de npm para obtener una explicación detallada de la salida del comando.

Alternativamente, puedes usar Yarn así:

yarn outdated

Nota: para verificar el estado desactualizado de un paquete específico, agregue el nombre del paquete después de la outdatedpalabra clave, por ejemplo, npm outdated lodash.

Cómo buscar paquetes globales obsoletos

Para confirmar qué paquete global está desactualizado, ejecute:

npm outdated -g --depth=0

Cómo buscar paquetes instalados localmente

Aquí hay tres formas de verificar los paquetes instalados localmente:

Paquetes instalados localmente y sus dependencias

npm list

O usa Yarn así:

yarn list

Paquetes instalados localmente, sin sus dependencias

npm list --depth=0

O,

yarn list --depth=0

Compruebe si un paquete específico se instaló localmente

npm list package-name

Cómo buscar paquetes instalados globalmente

Aquí hay tres formas de verificar los paquetes instalados globalmente:

Paquetes instalados globalmente y sus dependencias

npm list -g

O usa Yarn así:

yarn list -g

Paquetes instalados globalmente, sin sus dependencias

npm list -g --depth=0

O,

yarn list -g --depth=0

Compruebe si un paquete específico se instaló globalmente

npm list -g package-name

Cómo actualizar paquetes

Aquí se explica cómo actualizar paquetes con NPM e Yarn:

Cómo actualizar un paquete específico a su última versión

npm update package-name

O, para proyectos administrados con Yarn, ejecute:

yarn upgrade package-name

Cómo actualizar todos los paquetes instalados localmente de un proyecto

npm update

O,

yarn upgrade

Cómo actualizar un paquete específico instalado globalmente

Puede actualizar un paquete instalado globalmente como este:

npm update package-name -g

Cómo actualizar todos los paquetes instalados globalmente de su sistema

npm update -g

Cómo desinstalar paquetes

Aquí se explica cómo desinstalar paquetes con NPM e Yarn:

Cómo desinstalar un paquete de un proyecto específico

Primero, navegue hasta el directorio raíz del proyecto desde la línea de comando y ejecute:

npm uninstall package-name

Nota:

• Agregue el indicador -S(o --save) para eliminar las referencias al paquete en el dependenciescampo del package.jsonarchivo del proyecto.
• Agregue el indicador -D(o --save-dev) para eliminar las referencias al paquete en el devDependenciescampo del package.jsonarchivo del proyecto.

Para proyectos administrados con Yarn, ejecute:

yarn remove package-name

Nota: El yarn removecomando actualizará automáticamente los archivos package.jsony el proyecto.yarn.lock

Cómo desinstalar un paquete global

npm uninstall package-name -g

Tenga en cuenta que es una buena práctica no eliminar paquetes manualmente de la node_modulescarpeta, ya que tal acción puede afectar a otros módulos dependiendo de ella.

Pero, ¿qué es exactamente un módulo en NodeJS? Averigüémoslo a continuación.

¿Qué es exactamente un módulo en NodeJS?

Un módulo en NodeJS es cualquier archivo en la node_modulescarpeta que la computadora puede cargar a través de la función de Node require().

Aquí hay un ejemplo:

const myModule = require("./codesweetly.js");

Suponga que la computadora usó con éxito la require()función para cargar el codesweetly.jsarchivo. En tal caso, significa que codesweetly.jses un módulo asignado a la myModulevariable.

Tenga en cuenta que un módulo también puede ser un paquete, pero no siempre.

Un módulo no es un paquete si no tiene un package.jsonarchivo utilizado para registrar información sobre él.

Además, tenga en cuenta que para que la función pueda cargar un módulo require(), el módulo debe ser uno de los siguientes:

• Un paquete, cuyo package.jsonarchivo contiene un "main"campo.
• Un archivo JavaScript.

Cómo publicar su proyecto en el registro de NPM

NPM es un registro gratuito para autores de paquetes públicos .

Entonces, puede usarlo para publicar cualquier proyecto (carpeta) desde su computadora que tenga un package.jsonarchivo.

A continuación se detallan los pasos necesarios para compartir su paquete con el mundo.

Paso 1: Inicie sesión o regístrese

Vaya al sitio web de NPM e inicie sesión (o regístrese si aún no tiene una cuenta).

Nota: asegúrese de verificar su correo electrónico después de crear una nueva cuenta. De lo contrario, obtendrá un 403 Forbiddenerror al publicar su paquete.

Paso 2: Iniciar sesión

Inicie sesión en su cuenta de NPM desde la línea de comandos de la siguiente manera:

npm login

Nota: Puede usar el npm whoamicomando para verificar si está conectado actualmente.

Paso 3: ¡Publique su paquete!

Vaya al directorio raíz de su proyecto y publíquelo así:

npm publish

Asegúrese de que el nombre de su paquete no exista actualmente en NPM. De lo contrario, obtendrá un error durante la publicación.

Puede usar el npm searchcomando (o la barra de búsqueda del sitio web de NPM ) para buscar si el nombre que desea usar ya existe en NPM.

Supongamos que ya se han tomado todos los nombres adecuados para su paquete. En ese caso, NPM le permite publicar su proyecto como un alcance.

En otras palabras, puede publicar su paquete como una subsección de su nombre de usuario. Veamos cómo a continuación.

Cómo publicar su paquete como un alcance de su nombre de usuario

Abra su package.jsonarchivo y prefije el nombre de su paquete con su nombre de usuario.

Aquí hay un ejemplo:

{
  "name": "@username/package-name",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

La configuración predeterminada de NPM asume que un paquete de nombres con ámbito es un proyecto privado. Por lo tanto, obtendrá un error si usa el npm publishcomando para compartir un paquete de nombre con ámbito.

Por lo tanto, para publicar su paquete como ámbito de su nombre de usuario, agregue la --access=publicbandera al npm publishcomando:

npm publish --access=public

Nota: puede convertir su proyecto en un paquete con ámbito durante el proceso de inicialización utilizando el npm init --scope=usernamecomando en lugar de npm init.

Visión de conjunto

Este artículo discutió qué es un administrador de paquetes. También analizamos cómo funcionan dos administradores de paquetes populares (NPM e Yarn).

¡Gracias por leer!

Fuente: https://www.freecodecamp.org/news/javascript-package-manager-npm-and-yarn/

#npm #yarn 

Administradores De Paquetes De JavaScript Comparados: Npm, Yarn O Pnpm

Nota del editor : esta publicación se reescribió por completo el 16 de febrero de 2022 para reevaluar el panorama del administrador de paquetes, hacer referencia y comparar nuevas herramientas y espacios de trabajo, analizar la funcionalidad de Corepack y los impactos en el rendimiento, brindar una vista panorámica del uso del administrador de paquetes entre proyectos populares de código abierto y explicar más a fondo la evolución de los gestores de paquetes desde 2010.

Actualmente existen tres jugadores principales en el campo de los administradores de paquetes:

1. sobre el nivel del mar
2. Yarn : veremos en breve que Yarn puede referirse a Yarn Classic (< v2) o a su versión más moderna Yarn Berry (≥ v2)
3. rendimiento sobre el nivel del mar (pnpm)

Prácticamente, hemos logrado la paridad de características entre todos los administradores de paquetes, por lo que lo más probable es que decida qué administrador de paquetes usar en función de los requisitos no funcionales, como la velocidad de instalación, el consumo de almacenamiento o cómo se integra con su flujo de trabajo existente.

Por supuesto, la forma en que elija usar cada administrador de paquetes será diferente, pero todos comparten un conjunto de conceptos principales. Puede hacer lo siguiente con cualquiera de estos administradores de paquetes:

• Manejar y escribir metadatos
• Instalar por lotes o actualizar todas las dependencias
• Agregar, actualizar y eliminar dependencias
• Ejecutar guiones
• Publicar paquetes
• Realizar auditorías de seguridad

Sin embargo, a pesar de esta paridad, los administradores de paquetes difieren bajo el capó. Tradicionalmente, npm e Yarn han instalado dependencias en una node_modulescarpeta plana . Pero esta estrategia de resolución de la dependencia no está exenta de críticas.

Por lo tanto, pnpm ha introducido algunos conceptos nuevos para almacenar dependencias de manera más eficiente en una node_modulescarpeta anidada. Yarn Berry va aún más lejos al abandonar por node_modulescompleto su modo Plug'n'Play (PnP).

Siéntase libre de saltar y leer lo que sea más relevante para usted.

Cómo utilizar el proyecto complementario

Creé una aplicación React complementaria para demostrar algunos de los conceptos únicos de los diferentes administradores de paquetes. Existe una rama Git correspondiente para cada variante del administrador de paquetes. Este es el proyecto que también utilicé para crear la tabla de rendimiento en la sección a continuación de esta publicación.

Aunque el tipo de aplicación no es importante para el tema de este artículo, he elegido un proyecto de tamaño mediano y realista para poder iluminar diferentes aspectos; como ejemplo del pasado reciente, el mecanismo PnP de Yarn Berry provocó algunas discusiones acaloradas sobre problemas de compatibilidad que este proyecto es adecuado para ayudar a examinar.

Una breve historia de los administradores de paquetes de JavaScript

El primer administrador de paquetes que se lanzó fue npm, en enero de 2010. Estableció los principios básicos de cómo funcionan los administradores de paquetes en la actualidad.

Si npm existe desde hace más de 10 años, ¿por qué existen alternativas? Aquí hay algunas razones clave por las que han surgido:

• Diferentes algoritmos de resolución de dependencias con diferentes node_modulesestructuras de carpetas (anidado, plano, node_modulesmodo PnP)
• Diferentes soportes para izar , lo que tiene implicaciones de seguridad.
• Diferentes formatos de archivo de bloqueo, cada uno de los cuales tiene implicaciones de rendimiento
• Diferentes enfoques para almacenar paquetes en disco, lo que tiene implicaciones en la eficiencia del espacio en disco
• Soporte diferente para proyectos de paquetes múltiples (también conocidos como espacios de trabajo), lo que afecta la capacidad de mantenimiento y la velocidad de grandes monorepos
• Diferentes necesidades de nuevas herramientas y comandos, cada uno de los cuales tiene implicaciones DX
  • Relacionado, diferentes necesidades de extensibilidad a través de complementos y herramientas comunitarias
• Diferentes grados de configurabilidad y flexibilidad.

Profundicemos en una breve historia de cómo se identificaron estas necesidades después de que npm saltó a la fama, cómo Yarn Classic resolvió algunas de ellas, cómo pnpm amplió estos conceptos y cómo Yarn Berry, como sucesor de Yarn Classic, trató de romper el molde. por estos conceptos y procesos tradicionales.

sobre el nivel del mar, el pionero

npm es el antepasado de los administradores de paquetes. Por error, mucha gente cree que npm es un acrónimo de “Node package manager”, pero no es así . Sin embargo, se incluye con el tiempo de ejecución de Node.js.

Su lanzamiento supuso una revolución porque, hasta entonces, las dependencias de los proyectos se descargaban y gestionaban de forma manual. Conceptos como el package.jsonarchivo con sus campos de metadatos (p. ej., devDependencies), el almacenamiento de dependencias en node_modules, scripts personalizados, registros de paquetes públicos y privados, y más, fueron introducidos por npm.

En 2020, GitHub adquirió npm , por lo que, en principio, npm ahora está bajo la administración de Microsoft. Al momento de escribir este artículo, la versión principal más reciente es v8 , lanzada en octubre de 2021.

Yarn (v1 / Classic), responsable de muchas innovaciones

En una publicación de blog de octubre de 2016 , Facebook anunció un esfuerzo de colaboración con Google y algunos otros para desarrollar un nuevo administrador de paquetes que resolvería los problemas de consistencia, seguridad y rendimiento que npm tenía en ese momento. Llamaron a la alternativa Yarn , que significa Otro Negociador de Recursos.

Aunque basaron el diseño arquitectónico de Yarn en muchos conceptos y procesos establecidos por npm, Yarn tuvo un gran impacto en el panorama del administrador de paquetes en su versión inicial. A diferencia de npm, Yarn paralelizó las operaciones para acelerar el proceso de instalación, que había sido un gran problema para las primeras versiones de npm.

Yarn puso el listón más alto en DX, seguridad y rendimiento, y también inventó muchos conceptos, entre ellos:

• Soporte monorepo nativo
• Instalaciones con reconocimiento de caché
• Almacenamiento en caché sin conexión
• Bloquear archivos

Yarn v1 entró en modo de mantenimiento en 2020 . Desde entonces, la línea v1.x se ha considerado heredada y se le cambió el nombre a Yarn Classic. Su sucesor, Yarn v2 o Berry, es ahora la rama de desarrollo activa.

pnpm, rápido y eficiente en disco

La versión 1 de pnpm fue lanzada en 2017 por Zoltan Kochan. Es un reemplazo directo para npm, por lo que si tiene un proyecto npm, ¡puede usar pnpm de inmediato!

El principal problema que tenían los creadores de pnpm con npm e Yarn era el almacenamiento redundante de dependencias que se usaban en todos los proyectos. Aunque Yarn Classic tenía ventajas de velocidad sobre npm, usaba el mismo enfoque de resolución de dependencias, lo cual era imposible para los creadores de pnpm: npm y Yarn Classic usaban elevación para aplanar su node_modules.

En lugar de izar, pnpm introdujo una estrategia alternativa de resolución de dependencias: almacenamiento direccionable por contenido . Este método da como resultado una node_modulescarpeta anidada que almacena paquetes en un almacén global en su carpeta de inicio ( ~/.pnpm-store/). Cada versión de una dependencia se almacena físicamente en esa carpeta solo una vez, lo que constituye una única fuente de verdad y ahorra bastante espacio en disco.

Esto se logra a través de un node_modulesdiseño, utilizando enlaces simbólicos para crear una estructura anidada de dependencias, donde cada archivo de cada paquete dentro de la carpeta es un enlace fijo a la tienda. El siguiente diagrama de la documentación oficial aclara esto.

Fuente: pnpm

La influencia de pnpm se puede ver en su informe de 2021 : los competidores quieren adoptar los conceptos de instalación de pnpm, como la estructura de enlaces simbólicosnode_modules y la gestión eficiente del disco de los paquetes debido a sus innovaciones en el almacenamiento direccionable por contenido .

Yarn (v2, Berry), reinventa la rueda con Plug'n'Play

Yarn 2 se lanzó en enero de 2020 y se anunció como una actualización importante del Yarn original. El equipo de Yarn comenzó a referirse a él como Yarn Berry para que fuera más obvio que era esencialmente un nuevo administrador de paquetes con una nueva base de código y nuevos principios.

La principal innovación de Yarn Berry es su enfoque Plug'n'Play (PnP) , que surgió como una estrategia para corregirnode_modules . En lugar de generar node_modules, se genera un .pnp.cjsarchivo con tablas de búsqueda de dependencias, que se puede procesar de manera más eficiente porque es un archivo único en lugar de una estructura de carpetas anidadas. Además, cada paquete se almacena como un archivo zip dentro de la .yarn/cache/carpeta, lo que ocupa menos espacio en disco que la node_modulescarpeta.

Todo este cambio, y tan rápido, generó una gran controversia después del lanzamiento. Los cambios importantes de PnP requirieron que los mantenedores actualizaran sus paquetes existentes para ser compatibles con él. El nuevo enfoque PnP se usó de forma predeterminada, y volver al node_modulesprincipio no fue sencillo, lo que llevó a muchos desarrolladores destacados a criticar abiertamente a Yarn 2 por no habilitarlo.

Desde entonces, el equipo de Yarn Berry ha abordado muchos problemas en sus versiones posteriores. Para abordar la incompatibilidad de PnP, el equipo ofreció algunas formas de cambiar fácilmente el modo de operación predeterminado. Con la ayuda de un node_modulescomplemento , solo se necesitaba una línea de configuración para usar el node_modulesenfoque tradicional.

Además, el ecosistema de JavaScript ha brindado más y más soporte para PnP a lo largo del tiempo, como puede ver en esta tabla de compatibilidad , y algunos grandes proyectos se han movido para adoptar Yarn Berry. En mi proyecto complementario , también pude implementar correctamente PnP con mi proyecto de demostración React.

Aunque Yarn Berry es bastante joven, también tiene un impacto en el panorama de los administradores de paquetes: pnpm adoptó un enfoque PnP a fines de 2020.

Flujos de trabajo de instalación

Primero se debe instalar un administrador de paquetes en los sistemas locales y de CI/CD de cada desarrollador.

sobre el nivel del mar

npm se envía con Node.js, por lo que no se necesita ningún paso adicional. Además de descargar el instalador de Node.js para su sistema operativo, se ha vuelto una práctica común usar herramientas CLI para administrar versiones de software. En el contexto de Node, Node Version Manager (nvm) o Volta se han convertido en utilidades muy útiles.

Yarn Classic y Yarn Berry

Puede instalar Yarn 1 de diferentes maneras, por ejemplo, como un paquete npm con $ npm i -g yarn.

Para migrar de Yarn Classic a Yarn Berry , la forma recomendada es:

• Instale o actualice Yarn Classic a la última versión 1.x
• Use el yarn set versioncomando para actualizar a la última versión moderna:$ yarn set version berry

Sin embargo, la forma recomendada de instalar Yarn Berry es a través de Corepack.

Corepack fue creado por la gente de Yarn Berry. La iniciativa se llamó originalmente administrador de paquetes (pmm) 🤯 y se fusionó con Node en LTS v16.

Con la ayuda de Corepack, no tiene que instalar los administradores de paquetes alternativos de npm "por separado" porque Node incluye binarios Yarn Classic, Yarn Berry y pnpm como correcciones. Estas correcciones permiten a los usuarios ejecutar comandos Yarn y pnpm sin tener que instalarlos explícitamente primero y sin saturar la distribución de Node.

Corepack viene preinstalado con Node.js ≥ v16.9.0. Sin embargo, para versiones anteriores de Node, puede instalarlo usando $ npm install -g corepack.

Habilite Corepack primero, antes de usarlo. El ejemplo muestra cómo activarlo en Yarn Berry v3.1.1.

# you need to opt-in first
$ corepack enable
# shim installed but concrete version needs to activated
$ corepack prepare yarn@3.1.1 --activate

pnpm

Puede instalar pnpm como un paquete npm con $ npm i -g pnpm. También puede instalar pnpm con Corepack : $ corepack prepare pnpm@6.24.2 --activate.

Estructuras de proyecto

En esta sección verás de un vistazo las principales características de los diferentes gestores de paquetes. Puede detectar fácilmente qué archivos están involucrados en la configuración de administradores de paquetes particulares y qué archivos se generan en un paso de instalación.

Todos los administradores de paquetes almacenan toda la metainformación importante en el archivo de manifiesto del proyecto, package.json. Además, se puede usar un archivo de configuración en el nivel raíz para configurar registros privados o métodos de resolución de dependencias.

Con un paso de instalación, las dependencias se almacenan en una estructura de archivos (por ejemplo, dentro de node_modules) y se genera un archivo de bloqueo. Esta sección no tiene en cuenta la configuración de espacios de trabajo , por lo que todos los ejemplos solo muestran una única ubicación donde se almacenan las dependencias.

sobre el nivel del mar

Con $ npm install, o el más corto $ npm i, se generan un package-lock.jsonarchivo y una carpeta. Se puede colocar un archivo de configuraciónnode_modules opcional en el nivel raíz. Consulte la siguiente sección para obtener más información sobre los archivos de bloqueo..npmrc

.
├── node_modules/
├── .npmrc
├── package-lock.json
└── package.json

Hilo clásico

Ejecutar $ yarncrea un yarn.lockarchivo y una node_modulescarpeta. Un .yarnrcarchivo también puede ser una opción de configuración; Yarn Classic también hace honor a los .npmrcarchivos. Opcionalmente, se puede usar una carpeta de caché ( .yarn/cache/) y una ubicación que almacene la versión actual de Yarn Classic ( .yarn/releases/). Las diferentes formas de configurar esto se pueden ver en la sección de comparación de configuraciones.

.
├── .yarn/
│   ├── cache/
│   └── releases/
│       └── yarn-1.22.17.cjs
├── node_modules/
├── .yarnrc
├── package.json
└── yarn.lock

Baya de hilo connode_modules

Independientemente del modo de instalación, tendrá que manejar más archivos y carpetas en los proyectos de Yarn Berry que en los proyectos que usan otros administradores de paquetes. Algunos son opcionales y otros son obligatorios.

Yarn Berry ya no honra .npmrcni .yarnrcarchiva; en su lugar, se requiere un .yarnrc.ymlarchivo de configuración . Para un flujo de trabajo tradicional con una node_modulescarpeta generada, debe proporcionar una nodeLinkerconfiguración que use una node_modulesvariante de instalación inspirada en pnpm.

# .yarnrc.yml
nodeLinker: node-modules # or pnpm

La ejecución $ yarninstala todas las dependencias en una node_modulescarpeta. Se yarn.lockgenera un archivo más nuevo pero incompatible con Yarn Classic. Además, .yarn/cache/se genera una carpeta que se usa para instalaciones sin conexión. La releasescarpeta es opcional y almacena la versión de Yarn Berry que usa el proyecto, como veremos en la sección de comparación de configuraciones.

.
├── .yarn/
│   ├── cache/
│   └── releases/
│       └── yarn-3.1.1.cjs
├── node_modules/
├── .yarnrc.yml
├── package.json
└── yarn.lock

Baya de hilo con PnP

Tanto para los modos PnP estrictos como flexibles$ yarn , la ejecución genera .yarn/cache/y .yarn/unplugged/, junto con .pnp.cjsy yarn.lockarchivos. PnP estricto es el modo predeterminado, pero para suelto, se requiere una configuración.

# .yarnrc.yml
nodeLinker: pnp
pnpMode: loose

En un proyecto PnP, .yarn/lo más probable es que la carpeta contenga una sdk/carpeta para proporcionar compatibilidad con IDE además de una releases/carpeta. Hay incluso más carpetas que pueden formar parte de .yarn/, según su caso de uso.

.
├── .yarn/
│   ├── cache/
│   ├── releases/
│   │   └── yarn-3.1.1.cjs
│   ├── sdk/
│   └── unplugged/
├── .pnp.cjs
├── .pnp.loader.mjs
├── .yarnrc.yml
├── package.json
└── yarn.lock

pnpm

El estado inicial de un proyecto pnpm se parece a un proyecto npm o Yarn Classic: necesita un package.jsonarchivo. Después de instalar las dependencias con , se genera $ pnpm iuna carpeta, pero su estructura es completamente diferente debido a su enfoque de almacenamiento direccionable por contenido.node_modules

pnpm también genera su propia versión de un archivo de bloqueo, pnp-lock.yml. Puede proporcionar una configuración adicional con un .npmrcarchivo opcional.

.
├── node_modules/
│   └── .pnpm/
├── .npmrc
├── package.json
└── pnpm-lock.yml

Bloquear archivos y almacenamiento de dependencias

Como se describe en la sección anterior, cada administrador de paquetes crea archivos de bloqueo .

Los archivos de bloqueo almacenan exactamente las versiones de cada dependencia instalada para su proyecto, lo que permite instalaciones más predecibles y deterministas. Esto es necesario porque las versiones de dependencia probablemente se declaran con rangos de versión (p. ej., ≥ v1.2.5) y, por lo tanto, las versiones realmente instaladas podrían diferir si no "bloquea" sus versiones.

Los archivos de bloqueo a veces también almacenan sumas de verificación, que trataremos con más detalle en nuestra sección sobre seguridad.

Los archivos de bloqueo han sido una característica de npm desde v5 ( package-lock.json), en pnpm desde el primer día ( pnpm-lock.yaml) y en un nuevo formato YAML en Yarn Berry ( yarn.lock).

En la sección anterior, vimos el enfoque tradicional, donde las dependencias se instalan en una node_modulesestructura de carpetas. Este es el esquema que utilizan npm, Yarn Classic y pnpm , donde pnpm lo hace de manera más eficiente que los demás.

Yarn Berry en modo PnP lo hace de manera diferente. En lugar de una node_modulescarpeta, las dependencias se almacenan como archivos zip en combinación con un archivo .yarn/cache/y ..pnp.cjs

Es mejor tener estos archivos bloqueados bajo el control de versiones porque resuelve el problema "funciona en mi máquina": todos los miembros del equipo instalan las mismas versiones.

Comandos CLI

Las siguientes tablas comparan un conjunto seleccionado de diferentes comandos CLI disponibles en npm, Yarn Classic, Yarn Berry y pnpm. Esta no es una lista completa, pero constituye una hoja de trucos. Esta sección no cubre los comandos relacionados con el espacio de trabajo.

npm y pnpm presentan especialmente muchos alias de comandos y opciones, lo que significa que los comandos pueden tener diferentes nombres, es decir, $ npm installes lo mismo que $ npm add. Además, muchas opciones de comandos tienen versiones cortas, por ejemplo, -Den lugar de --save-dev.

En las tablas, me referiré a todas las versiones cortas como alias. Con todos los administradores de paquetes, puede agregar, actualizar o eliminar varias dependencias separándolas con espacios (p. ej., npm update react react-dom). En aras de la claridad, los ejemplos solo muestran el uso con dependencias individuales.

Gestión de dependencias

Esta tabla cubre los comandos de administración de dependencias para instalar o actualizar todas las dependencias especificadas en package.json, o múltiples dependencias especificándolas en los comandos.

Acción	sobre el nivel del mar	Hilo clásico	Baya de hilo	pnpm
instalar deps enpackage.json	npm install alias: i,add	yarn installoyarn	como clásico	pnpm install alias:i
actualizar deps en package.jsonacc. sever	npm update alias: up,upgrade	yarn upgrade	yarn semver up(a través del complemento )	pnpm update alias:up
actualizar las dependencias package.jsona la última	N / A	yarn upgrade --latest	yarn up	pnpm update --latest alias:-L
actualizar deps acc. sever	npm update react	yarn upgrade react	yarn semver up react	pnpm up react
actualizar deps a la última	npm update react@latest	yarn upgrade react --latest	yarn up react	pnpm up -L react
actualizar deps de forma interactiva	N / A	yarn upgrade-interactive	yarn upgrade-interactive(a través del complemento )	$ pnpm up --interactive alias:-i
agregar dependencias de tiempo de ejecución	npm i react	yarn add react	como clásico	pnpm add react
añadir departamentos de desarrollo	npm i -D babel alias:--save-dev	yarn add -D babel alias:  --dev	como clásico	pnpm add -D babel alias:--save-dev
agregar deps a package.jsonsin semver	npm i -E react alias:--save-exact	yarn add -E react alias:--exact	como clásico	pnpm add -E react alias:--save-exact
desinstalar deps y eliminar depackage.json	npm uninstall react alias: remove, rm, r, un,unlink	yarn remove react	como clásico	pnpm remove react alias: rm, un,uninstall
desinstalar deps sin actualización depackage.json	npm uninstall  --no-save	N / A	N / A	N / A

Ejecución de paquetes

Los siguientes ejemplos muestran cómo administrar paquetes que constituyen herramientas de utilidad durante el tiempo de desarrollo, también conocidos como archivos binarios, como ntl , para ejecutar secuencias de comandos de forma interactiva. La terminología utilizada en la tabla:

• Paquete: dependencia o binario
• Binario: una utilidad ejecutable que se ejecuta desde node_modules/.bin/o .yarn/cache/(PnP)

Es importante comprender que Yarn Berry solo nos permite ejecutar archivos binarios que hemos especificado en nuestro campo package.jsono que están expuestos en su binmetacampo por razones de seguridad. pnpm presenta el mismo comportamiento de seguridad .

Acción	sobre el nivel del mar	Hilo clásico	Baya de hilo	pnpm
instalar paquetes globalmente	npm i -g ntl alias:--global	yarn global add ntl	N/A ( global eliminado )	pnpm add --global ntl
actualizar paquetes globalmente	npm update -g ntl	yarn global upgrade ntl	N / A	pnpm update --global ntl
eliminar paquetes globalmente	npm uninstall -g ntl	yarn global remove ntl	N / A	pnpm remove --global ntl
ejecutar binarios desde la terminal	npm exec ntl	yarn ntl	yarn ntl	pnpm ntl
ejecutar binarios desde el script	ntl	ntl	ntl	ntl
ejecución de paquetes dinámicos	npx ntl	N / A	yarn dlx ntl	pnpm dlx ntl
agregar dependencias de tiempo de ejecución	npm i react	yarn add react	como clásico	pnpm add react
añadir departamentos de desarrollo	npm i -D babel alias:--save-dev	yarn add -D babel alias:--dev	como clásico	pnpm add -D babel alias:--save-dev
agregar deps a package.jsonsin semver	npm i -E react alias:--save-exact	yarn add -E react alias:--exact	como clásico	pnpm add -E react alias:--save-exact
desinstalar deps y eliminar depackage.json	npm uninstall react alias: remove, rm, r, un,unlink	yarn remove react	como clásico	pnpm remove react alias: rm, un,uninstall
desinstalar deps sin actualización depackage.json	npm uninstall --no-save	N / A	N / A	N / A

Comandos comunes

Esta tabla cubre útiles comandos incorporados. Si no hay un comando oficial, a menudo se puede usar un comando de terceros, a través de un paquete npm o un complemento de Yarn Berry.

Acción	sobre el nivel del mar	Hilo clásico	Baya de hilo	pnpm
publicar paquete	npm publish	yarn publish	yarn npm publish	pnpm publish
lista de unidades instaladas	npm ls alias: list, la,ll	yarn list		pnpm list alias:ls
lista de dependencias obsoletas	npm outdated	yarn outdated	yarn upgrade-interactive	pnpm outdated
imprimir información sobre deps	npm explain ntl alias:why	yarn why ntl	como clásico	pnpm why ntl
proyecto de inicio	npm init -y npm init(interactivo) alias:--yes	yarn init -y yarn init(interactivo) alias:--yes	yarn init	pnpm init -y pnpm init(interactivo) alias:--yes
imprimir información de licencias	N/A (a través de un paquete de terceros)	yarn licenses list	N/A (o a través de un complemento , otro complemento )	N/A (a través de un paquete de terceros)
actualizar la versión del administrador de paquetes	N/A (con herramientas de terceros, por ejemplo, nvm)	con npm:yarn policies set-version 1.13.0	con paquete básico:yarn set version 3.1.1	N/A (con npm, Corepack)
realizar auditoria de seguridad	npm audit	yarn audit	yarn npm audit	pnpm audit
agregar deps a package.jsonsin semver	npm i -E react alias:--save-exact	yarn add -E react alias:--exact	como clásico	pnpm add -E react alias:--save-exact
desinstalar deps y eliminar depackage.json	npm uninstall react alias: remove, rm, r, un,unlink	yarn remove react	como clásico	pnpm remove react alias: rm, un,uninstall
desinstalar deps sin actualización depackage.json	npm uninstall --no-save	N / A	N / A	N / A

Archivos de configuración

La configuración de los administradores de paquetes se lleva a cabo tanto en sus package.jsonarchivos de configuración como en los dedicados. Ejemplos de opciones de configuración son:

• Definir la versión exacta a utilizar
• Usar una estrategia particular de resolución de dependencia
• Configurar el acceso a un registro privado
• Dígale al administrador de paquetes dónde encontrar espacios de trabajo dentro de un monorepo

sobre el nivel del mar

La mayor parte de la configuración tiene lugar en un archivo de configuración dedicado ( .npmrc).

Si desea utilizar la función de espacios de trabajo de npm, debe agregar una configuración package.jsonmediante el campo de metadatos de espacios de trabajo para indicarle a npm dónde encontrar las carpetas que constituyen subproyectos o espacios de trabajo, respectivamente.

{
  // ...
  "workspaces": [
    "hooks",
    "utils"
  ]
}

Cada administrador de paquetes funciona de manera inmediata con el registro público de npm. En el contexto de una empresa con bibliotecas compartidas, lo más probable es que desee reutilizarlas sin publicarlas en un registro público. Para configurar un registro privado, puede hacerlo en un .npmrcarchivo.

# .npmrc
@doppelmutzi:registry=https://gitlab.doppelmutzi.com/api/v4/projects/41/packages/npm/

Existen muchas opciones de configuración para npm y se ven mejor en los documentos.

Hilo clásico

Puede configurar espacios de trabajo de Yarn en su archivo package.json. Es similar a npm, pero el espacio de trabajo debe ser un paquete privado.

{
  // ...
  "private": true,
  "workspaces": ["workspace-a", "workspace-b"]
}

Cualquier configuración opcional va a un .yarnrcarchivo . Una opción de configuración común es establecer un yarn-path, que impone una versión binaria particular para que la use cada miembro del equipo. El yarn-pathdirige a una carpeta (p. ej., .yarn/releases/) que contiene una versión particular de Yarn. Puede instalar una versión de Yarn Classic con el yarn policiescomando .

Baya de hilo

La configuración de espacios de trabajo en Yarn Berry también es análoga a cómo se hace en Yarn Classic, con un archivo package.json. La mayor parte de la configuración de Yarn Berry tiene lugar en .yarnrc.yml, y hay muchas opciones de configuración disponibles. El ejemplo de Yarn Classic también es posible, pero el campo de metadatos se renombra a yarnPath.

# .yarnrc.yml
yarnPath: .yarn/releases/yarn-3.1.1.cjs

Yarn Berry se puede ampliar con complementos mediante el uso de yarn plugin import. Este comando actualiza el .yarnrc.yml.

# .yarnrc.yml
plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-semver-up.cjs
    spec: "https://raw.githubusercontent.com/tophat/yarn-plugin-semver-up/master/bundles/%40yarnpkg/plugin-semver-up.js"

Como se describe en la sección de historial, puede haber problemas con las dependencias en el modo estricto PnP debido a la incompatibilidad. Existe una solución típica para un problema PnP de este tipo: la packageExtensionspropiedad de configuración . Puede seguir el siguiente ejemplo con el proyecto complementario .

# .yarnrc.yml
packageExtensions:
  "styled-components@*":
    dependencies:
      react-is: "*"

pnpm

pnpm usa el mismo mecanismo de configuración que npm , por lo que puede usar un .npmrcarchivo. La configuración de un registro privado también funciona de la misma manera que con npm.

Con la característica de espacios de trabajo de pnpm , está disponible el soporte para proyectos de paquetes múltiples. Para inicializar un monorepo, debe especificar la ubicación de los paquetes en un pnpm-workspace.yamlarchivo.

# pnpm-workspace.yaml
packages:
  - 'packages/**'

soporte Monorepo

¿Qué es un monorepo?

Un monorepo es un repositorio que alberga múltiples proyectos, que se denominan espacios de trabajo o paquetes. Es una estrategia de organización de proyectos para mantener todo en un solo lugar en lugar de usar múltiples repositorios.

Por supuesto, esto viene con una complejidad adicional. Yarn Classic fue el primero en habilitar esta funcionalidad, pero ahora todos los principales administradores de paquetes ofrecen una función de espacios de trabajo. Esta sección muestra cómo configurar espacios de trabajo con cada uno de los diferentes administradores de paquetes.

sobre el nivel del mar

El equipo de npm lanzó la tan esperada función de espacios de trabajo de npm en v7. Contenía una serie de comandos CLI que ayudaron a administrar proyectos de paquetes múltiples desde un paquete raíz. La mayoría de los comandos se pueden usar con opciones relacionadas con el espacio de trabajo para decirle a npm si debe ejecutarse en un espacio de trabajo específico, en varios o en todos.

# Installing all dependencies for all workspaces
$ npm i --workspaces.
# run against one package
$ npm run test --workspace=hooks
# run against multiple packages
$ npm run test --workspace=hooks --workspace=utils
# run against all
$ npm run test --workspaces
# ignore all packages missing test
$ npm run test --workspaces --if-present

A diferencia de otros administradores de paquetes, npm v8 actualmente no admite el filtrado avanzado ni la ejecución de varios comandos relacionados con el espacio de trabajo en paralelo.

Hilo clásico

En agosto de 2017, el equipo de Yarn anunció soporte monorepo de primera clase en términos de una función de espacios de trabajo . Antes de este punto, solo era posible usar un administrador de paquetes en un proyecto de paquetes múltiples con software de terceros como Lerna . Esta adición a Yarn allanó el camino para que otros administradores de paquetes también implementaran dicha función.

También he escrito anteriormente sobre cómo usar la función de espacios de trabajo de Yarn Classic con y sin Lerna, si está interesado. Pero esta publicación solo cubrirá algunos comandos necesarios para ayudarlo a administrar las dependencias en una configuración de espacios de trabajo de Yarn Classic.

# Installing all dependencies for all workspaces
$ yarn
# display dependency tree
$ yarn workspaces info
# run start command only for one package
$ yarn workspace awesome-package start
# add Webpack to package
$ yarn workspace awesome-package add -D webpack
# add React to all packages
$ yarn add react -W

Baya de hilo

Yarn Berry presentó espacios de trabajo desde el principio porque su implementación se basó en los conceptos de Yarn Classic. En un comentario de Reddit , un desarrollador principal de Yarn Berry dio una breve descripción general de las funciones orientadas al espacio de trabajo, que incluyen:

• $ yarn add --interactive: permite reutilizar versiones de otros espacios de trabajo al instalar un paquete
• $ yarn up: actualiza un paquete en todos los espacios de trabajo
• $ yarn workspaces focus: instala dependencias solo para un único espacio de trabajo
• $ yarn workspaces foreach: ejecuta un comando en todos los espacios de trabajo

Yarn Berry hace un uso intensivo de los protocolos , que se pueden usar en los campos dependencieso de los archivos. Uno de ellos es el protocolo .devDependenciespackage.jsonworkspace:

A diferencia de los espacios de trabajo de Yarn Classic, Yarn Berry define explícitamente que una dependencia debe ser uno de los paquetes de este monorrepositorio. De lo contrario, Yarn Berry podría intentar obtener una versión de un registro remoto si las versiones no coinciden.

{
  // ...
  "dependencies": {
    "@doppelmutzi/hooks": "workspace:*",
    "http-server": "14.0.0",
    // ...
  }  
}

pnpm

Con su workspace:protocolo, pnpm facilita proyectos monorepo de manera similar a Yarn Berry. Muchos comandos pnpm aceptan opciones como --recursive( -r) o --filterque son especialmente útiles en un contexto monorepo. Su comando de filtrado nativo también es un buen complemento o reemplazo para Lerna.

# prune all workspaces  
pnpm -r exec -- rm -rf node_modules && rm pnpm-lock.yaml  
# run all tests for all workspaces with scope @doppelmutzi
pnpm recursive run test --filter @doppelmutzi/

Rendimiento y eficiencia del espacio en disco

El rendimiento es una parte crucial de la toma de decisiones. Esta sección muestra mis puntos de referencia basados ​​en un proyecto pequeño y uno mediano. Aquí hay algunas notas sobre los proyectos de muestra:

• Ningún conjunto de puntos de referencia utiliza funciones de espacio de trabajo
• El pequeño proyecto especifica 33 dependencias.
• El proyecto mediano especifica 44 dependencias.

Realicé mediciones para tres casos de uso (UC), una vez para cada una de nuestras variantes de administrador de paquetes. Para conocer la evaluación detallada con explicaciones, echa un vistazo a los resultados del proyecto 1 (P1) y del proyecto 2 (P2) .

• UC 1: Sin caché/almacén, sin archivos de bloqueo, sin node_moduleso.pnp.cjs
• UC 2: existe caché/almacenamiento, no hay archivos de bloqueo, no node_moduleso.pnp.cjs
• UC 3: existe caché/almacenamiento, existen archivos de bloqueo, no node_moduleso.pnp.cjs

Usé la herramienta gnomon para medir el tiempo que consume una instalación (por ejemplo, $ yarn | gnomon). Además, medí los tamaños de los archivos generados, por ejemplo, $ du -sh node_modules.

Con mis proyectos y mis medidas, Yarn Berry PnP strict fue el ganador en términos de velocidad de instalación para todos los casos de uso y ambos proyectos.

Resultados de desempeño para el Proyecto 1
Método	npm v8.1.2	Hilo clásico v1.23.0	pnpm v6.24.4	Hilo Berry PnP suelto v3.1.1	Hilo Berry PnP estricto v3.1.1	Baya de hilo node_modules v3.1.1	Hilo Berry pnpm v3.1.1
CU 1	86.63s	108.89s	43.58s	31.77s	30.13 s	56.64s	60.91s
CU 2	41.54s	65.49s	26.43 s	12.46s	12,66 s	46.36s	40.74s
CU 3	23.59s	40.35s	20.32s	1,61 s	1,36 s	28.72s	31.89s
archivos y tamaño	package-lock.json: 1.3M node_modules: 467M	node_modules: 397M yarn.lock: 504K	pnpm-lock.yaml: 412K node_modules: 319M	yarn.lock: 540K caché: 68M desenchufado: 29M .pnp.cjs: 1,6M	yarn.lock: 540K caché: 68M desenchufado: 29M .pnp.cjs: 1,5M	node_modules: 395M yarn.lock: 540K caché: 68M	node_modules: 374M yarn.lock: 540K caché: 68M

 

Resultados de desempeño para el Proyecto 2
Método	npm v8.1.2	Hilo clásico v1.23.0	pnpm v6.24.4	Hilo Berry PnP suelto v3.1.1	Hilo Berry PnP estricto v3.1.1	Baya de hilo node_modules v3.1.1	Hilo Berry pnpm v3.1.1
CU 1	34.91s	43.26s	15,6 s	13.92s	6.44s	23.62s	20.09s
CU 2	7.92s	33.65s	8.86s	7.09s	5,63 s	15.12 s	14.93 s
CU 3	5.09s	15.64 s	4,73 s	0,93 s	0,79 s	8.18 s	6.02s
archivos y tamaño	package-lock.json: 684K node_modules: 151M	yarn.lock: 268K node_modules: 159M	pnpm-lock.yaml: 212K node_modules: 141M	.pnp.cjs: 1.1M : .pnp.loader.mjs8.0K yarn.lock: 292K .yarn: 38M	.pnp.cjs: 1.0M .pnp.loader.mjs: 8.0K yarn.lock: 292K .yarn: 38M	yarn.lock: 292K node_modules: 164M caché: 34M	yarn.lock: 292K node_modules: 156M caché: 34M

Estos son los puntos de referencia oficiales del equipo de Yarn Berry y de pnpm .

Características de seguridad

sobre el nivel del mar

npm ha sido demasiado indulgente cuando se trata de trabajar con paquetes defectuosos y ha experimentado algunas vulnerabilidades de seguridad que afectaron directamente a muchos proyectos. Por ejemplo, en la versión 5.7.0, cuando ejecutaba el sudo npmcomando en un sistema operativo Linux, era posible cambiar la propiedad de los archivos del sistema, lo que hacía que el sistema operativo quedara inutilizable.

Otro incidente ocurrió en 2018 e involucró el robo de Bitcoin. Básicamente, el popular paquete EventStream de Node.js agregó una dependencia maliciosa en su versión 3.3.6. Este paquete malicioso contenía una carga útil encriptada que intentaba robar Bitcoin de la máquina del desarrollador.

Para ayudar a resolver estos problemas, las versiones más recientes de npm utilizan el SHA-512algoritmo de criptografía package-lock.jsonpara verificar la integridad de los paquetes que instala.

En general, npm ha hecho cada vez más para cerrar sus brechas de seguridad, especialmente aquellas que se hicieron más obvias en comparación con Yarn.

Hilo

Tanto Yarn Classic como Yarn Berry han verificado la integridad de cada paquete con sumas de verificación almacenadas yarn.lockdesde el principio. Yarn también intenta evitar que recuperes paquetes maliciosos que no están declarados en tu package.jsondurante la instalación: si se encuentra una discrepancia, la instalación se cancela.

Yarn Berry en modo PnP no sufre los problemas de seguridad del node_modulesenfoque tradicional. A diferencia de Yarn Classic, Yarn Berry mejora la seguridad de la ejecución de comandos. Solo puede ejecutar binarios de dependencias que haya declarado explícitamente en su archivo package.json. Esta función de seguridad es similar a pnpm, que describiré a continuación.

pnpm

pnpm también usa sumas de verificación para verificar la integridad de cada paquete instalado antes de que se ejecute su código.

Como mencionamos anteriormente, npm y Yarn Classic tienen problemas de seguridad debido a la elevación . pnpm evita esto porque su modelo no usa elevación; en su lugar, genera node_modulescarpetas anidadas que eliminan el riesgo de acceso de dependencia ilegal. Esto significa que las dependencias solo pueden acceder a otras dependencias si se declaran explícitamente en package.json.

Esto es especialmente crucial en una configuración monorepo, como comentamos, porque el algoritmo de elevación a veces puede conducir a dependencias fantasma y doppelgangers .

Adopción por proyectos populares

Analicé muchos proyectos populares de código abierto para tener una idea de qué administradores de paquetes usa hoy en día la "élite de desarrolladores". Era importante para mí que estos proyectos se mantuvieran activamente y se actualizaran por última vez recientemente. Esto podría darle otra perspectiva al elegir un administrador de paquetes.

sobre el nivel del mar	Hilo clásico	Baya de hilo	pnpm
Esbelto	Reaccionar	es (con node_modules)	Ver 3
Preactuar	Angular	Libro de cuentos (con node_modules)	lista de navegadores
Express.js	Humano	Babel (con node_modules)	Prisma
Meteorito	Siguiente.js	Kit de herramientas Redux (con node_modules)	SvelteKit
Servidor Apolo	gatsby
	Siguiente
	Crear aplicación de reacción
	webpack-cli
	Emoción

Curiosamente, en el momento de escribir este artículo, ninguno de estos proyectos de código abierto utiliza un enfoque PnP.

Conclusión

El estado actual de los administradores de paquetes es excelente. Prácticamente hemos alcanzado la paridad de características entre todos los principales administradores de paquetes. Pero aún así, difieren bastante bajo el capó.

pnpm se parece a npm al principio porque su uso de CLI es similar, pero la administración de dependencias es muy diferente; El método de pnpm conduce a un mejor rendimiento y la mejor eficiencia de espacio en disco. Yarn Classic sigue siendo muy popular, pero se considera un software heredado y es posible que el soporte se elimine en un futuro próximo. Yarn Berry PnP es el nuevo chico del bloque, pero no se ha dado cuenta completamente de su potencial para revolucionar el panorama de los administradores de paquetes una vez más.

A lo largo de los años, muchos usuarios han preguntado quién usa qué administradores de paquetes y, en general, parece que la gente está especialmente interesada en la madurez y adopción de Yarn Berry PnP.

El objetivo de este artículo es brindarle muchas perspectivas para que tome una decisión sobre qué administrador de paquetes usar por su cuenta. Me gustaría señalar que no recomiendo un administrador de paquetes en particular. Depende de cómo sopeses los diferentes requisitos, ¡así que aún puedes elegir lo que quieras! 

Fuente: https://blog.logrocket.com/javascript-package-managers-compared/

#javascript #yarn #npm #pnpm 

Modern file-upload components & Hooks for React

React-Uploady is a lightweight library - enabling you to build (client-side) file-upload features with just a few lines of code. RU provides the foundations needed to upload files from the browser - The rest is up to you.

The philosophy behind this library is that it should be as simple as possible to use, yet customizable at every point. You can start simple, or you can can configure just about every aspect of the upload flow. For this purpose, RU provides components, hooks, and plenty of features. You get to choose which ones you need and only install the dependencies required (See Packages details below)

RU has a small footprint (by design) with very few (and small) dependencies.

Bundle	Minified size	GZipped size
core	32.8KB	10.7KB
core + ui	43.9KB	13.5KB
core + ui + chunked support	53.6KB	16.0KB
everything	78.7KB	22.9KB

Documentation

Getting Started

We recommend checking out the Uploady README first to understand how to configure your uploads and how to access upload data (using the provided hooks or events).

It’s also worth reading the Important Concepts section below for some key concepts.

In case you need UI components (like an upload button), check out the UI packages.

Additional Resources

Our Storybook has many examples, both simple and advanced.

Checkout our Guides section for additional examples & information.

Changelog

For a list of versions and changes, see the CHANGELOG

Installation

React-uploady is a mono-repo, and as such provides multiple packages with different functionality.

For React applications, at the very least, you will need the Uploady provider:

#Yarn: 
   $ yarn add @rpldy/uploady

#NPM:
   $ npm i @rpldy/uploady

If you wish to use the uploading mechanism (no UI), at the very least, you will need the Uploader:

#Yarn:
  $ yarn add @rpldy/uploader

#NPM:
  $ npm i @rpldy/uploader

After that, you can add additional packages as needed. See below for more details.

Packages

Main Packages

• @rpldy/uploader - The processing and queuing engine
• @rpldy/uploady - The context provider for react-uploady and hooks (lots of hooks)

UI Packages

• @rpldy/upload-button - Upload button component and asUploadButton HOC
• @rpldy/upload-preview - Image&video preview component for files being uploaded
• @rpldy/upload-url-input - Input component to send URL as upload info (ex: Cloudinary)
• @rpldy/upload-drop-zone - (Drag&)Drop zone to upload files and folder content
• @rpldy/retry-hooks - Hooks to interact with the retry mechanism

Providers

• @rpldy/chunked-uploady - Wrapper for Uploady with support for chunked uploads
• @rpldy/tus-uploady - Wrapper for Uploady with support for tus(resumable) uploads

Senders

• @rpldy/sender - Uploady’s main file sender (XHR)
• @rpldy/chunked-sender - add chunked uploads support on top of the XHR Sender
• @rpldy/tus-sender - add TUS resumable upload support
• @rpldy/mock-sender - use Mock sender for testing purposes

Extra

• @rpldy/retry - Add support for retrying failed uploads

Shared Packages

• @rpldy/shared - Internal set of utils+types that all packages require
• @rpldy/shared-ui - Internal set of utils+types that all UI packages require
• @rpldy/live-events - provides cancellable pub/sub “events”
• @rpldy/safe-storage - safe (don’t throw) versions of local and session storage
• @rpldy/simple-state - deep proxy object, so it’s only updateable through an update method

React Native

• @rpldy/native-uploady - Uploay for React Native (no react-dom)

Examples

For specific usage, see documentation in the relevant package README file.

For upload options see the @rpldy/uploady docs.

Simple Upload Button

This examples shows how you add Uploady and UploadButton to your app. This is all it takes to get file uploading to work in your React application.

import React from "react";
import Uploady from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const App = () => (<Uploady
    destination={{ url: "https://my-server/upload" }}>
    <UploadButton/>
</Uploady>);

Custom Upload Button

In case you want to use your own component as the upload trigger, use the asUploadButton HOC:

import React from "react";
import Uploady from "@rpldy/uploady";
import { asUploadButton } from "@rpldy/upload-button";

const DivUploadButton = asUploadButton((props) => {
    return <div {...props} style={{ cursor: "pointer" }}>
        DIV Upload Button
    </div>
});

const App = () => (<Uploady
    destination={{ url: "https://my-server/upload" }}>
    <DivUploadButton/>
</Uploady>);

Progress Hook

import React from "react";
import Uploady, { useItemProgressListener } from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

//must be rendered inside <Uploady>
const LogProgress = () => {
    useItemProgressListener((item) => {
        console.log(`>>>>> (hook) File ${item.file.name} completed: ${item.completed}`);
    });

    return null;
}

const App = () => (<Uploady
    destination={{ url: "https://my-server/upload" }}>
    <LogProgress/>   
    <UploadButton/>
</Uploady>);

Add support for resumable(tus) uploads

 import React from "react";
 import TusUploady from "@rpldy/tus-uploady";
 import UploadButton from "@rpldy/upload-button";

 const App = () => (<TusUploady
     destination={{ url: "https://my-tus-server/upload" }}
     chunkSize={2142880}
     sendDataOnCreate>
     <UploadButton/>
 </TusUploady>);

Add support for chunked uploads

Can be used with servers that support chunked uploads

import React from "react";
import ChunkedUploady from "@rpldy/chunked-uploady";
import UploadButton from "@rpldy/upload-button";

const App = () => (<ChunkedUploady
    destination={{ url: "https://my-server/upload" }}
    chunkSize={5242880}>

    <UploadButton/>
</ChunkedUploady>);

See more (advanced) examples in our guides and storybook.

Important Concepts

Upload Options

These are the options that are passed to the uploader to configure aspects of the upload process. For example, whether files can be grouped in a single request (by default, no).

Upload Options are typically passed to the Uploady instance. But these can be overriden. For example, by props passed to the upload button. Or even during upload processing.

Destination

Passed as a part of the upload options. It’s an object that is used to configure the end-point where the files will be uploaded to. It’s type is defined here.

See more information in the Uploady README.

At the very least, a destination should contain a URL property with the server endpoint.

Enhancer

(uploader: UploaderType, trigger: Trigger<mixed>) => UploaderType

Enhancers are functions that can enhance an uploader instance. They are also passed as part of the options given to the Uploady instance.

As they are applied when the uploader instance is created, they can change the way uploader does things or pass different defaults.

See this guide for practical information and sample code.

Batch

When a file or files are handed over to the uploader, they are grouped into a batch. This batch will have its own lifetime events. With a batch ID, it is possible to cancel all files that are part of it. It can also be used to retry all files in the batch (see @rpldy/retry).

BatchItem

Each file (or URL) added to the uploader are wrapped by a BatchItem object. They will have a unique ID within the life-time of the uploader instance. A BatchItem has its own lifetime events.

Resumable Uploads

RU supports resumable uploads through the tus protocol. Instead of using from @rpldy/uploady, use from @rpldy/tus-uploady and you will have resumable upload support on the client side. Your server will also have to support the same protocol for this to work of course.

See the @rpldy/tus-uploady documentation for more details.

UMD Bundles

React-uploady is also available on CDNs such as unpkg.com and jsdelivr.com

See this guide for more information on how to use.

jsDelivr

Bundle	URL
core	https://cdn.jsdelivr.net/npm/@rpldy/uploader/umd/rpldy-core.umd.min.js
core + ui	https://cdn.jsdelivr.net/npm/@rpldy/uploady/umd/rpldy-ui-core.umd.min.js
core + ui + chunked support	https://cdn.jsdelivr.net/npm/@rpldy/chunked-uploady/umd/rpldy-ui-core-chunked.umd.min.js
everything	https://cdn.jsdelivr.net/npm/@rpldy/uploady/umd/rpldy-all.umd.min.js

You will most likely need the polyfill (core js) bundle as well (load it first):

• core bundles -> https://cdn.jsdelivr.net/npm/@rpldy/uploady/umd/polyfills-bundle.js
• everything bundle -> https://cdn.jsdelivr.net/npm/@rpldy/uploady/umd/polyfills-all-bundle.js

unpkg

Bundle	URL
core	https://unpkg.com/@rpldy/uploader/umd/rpldy-core.umd.min.js
core + ui	https://unpkg.com/@rpldy/uploady/umd/rpldy-ui-core.umd.min.js
core + ui + chunked support	https://unpkg.com/@rpldy/chunked-uploady/umd/rpldy-ui-core-chunked.umd.min.js
everything	https://unpkg.com/@rpldy/uploady/umd/rpldy-all.umd.min.js

You will most likely need the polyfill (core js) bundle as well (load it first):

• core bundles -> https://unpkg.com/@rpldy/uploady/umd/polyfills-bundle.js
• everything bundle -> https://unpkg.com/@rpldy/uploady/umd/polyfills-all-bundle.js

Note that unpkg does a redirect to the latest version in case the URL doesn’t already contain it. So don’t copy any of the URLs above into your code. Instead, load them in the browser first and then copy the final URL from there (after the redirect).

Acknowledgements

logo’s wing thanks to Illustration Vectors by Vecteezy

Download Details:

Author: rpldy

Source Code: https://github.com/rpldy/react-uploady

#react #reactjs #javascript

NPM vs PNPM vs Yarn - JavaScript Package Managers

As JavaScript developers, we have access to several package managers. In this guide, we compare the most popular ones: npm, yarn, and pnpm.

In modern application development, we don’t write everything from scratch. Instead, we prefer to use existing open-source packages. Each of these packages has its own maintainers and community. So, using a package in our projects gives us some advantages like faster development, access to new, regular updates, and better security than custom-created script.

It’s common that one package depends on many other packages to work correctly. Similarly, the other packages may also depend on something like lodash, but lodash itself depends on several packages as well. In other words, the nested dependencies can sometimes become so complex that they are unable to handle dependency management manually.

Here’s when a package manager is extremely useful. Package managers are tools that automatically handle the dependencies of a project.

For example, a package manager can install new — or update existing — packages with a single command. Because everything is automated, so there’s no chance for human error. As JavaScript developers, we have access to several package managers. But, in this guide, we’ll compare the three most popular ones:

• npm
• Yarn
• pnpm

#javascript #npm #node #yarn #developer

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

• For single line comment in JavaScript we have to use // (double slashes)
• For multiple line comments we have to use / * – – * /

<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript