Una imágen dice más que mil palabras.
Introducción
Bienvenida a NPM
Gestión de dependencias
Instalación de NPM
Instalación de NPM en MacOS
Instalación de NPM en Windows
Configuración de dependencias
Primeros pasos en NPM
Instalación de dependencias
Instalación de dependencias de versiones específicas
Comandos en NPM (Scripts)
Actualización de dependencias
Seguridad y solución de problemas
Eliminación de dependencias y Package lock
Creación y publicación de paquetes
Crear un paquete
Publicar un paquete
Versionado de paquetes y paquetes privados
Cierre
Sigue desarrollando en JavaScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
El apartado de "scripts"
en el package.json
es el que indica los comandos a ejecutar del proyecto. Esta sección es la que utilizarás para crear comandos que optimicen el desarrollo de tu aplicación.
Para crear un comando en tu proyecto, utiliza la siguiente estructura, donde
json
{
"scripts": {
"<nombre>": "<comando>"
}
}
Una vez hayas escrito el comando en el archivo package.json
, la manera de ejecutarlo en la terminal será con el comando npm run <nombre>
.
Creemos tres comandos comunes: para iniciar el proyecto (start), crear un archivo para producción (build) y combinarlos (deploy). Que no te preocupe si no entiendes cada comando, solo entiende cómo ejecuta NPM el script.
json
{
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production",
"deploy": "npm run format && npm run build"
}
}
Y para ejecutarlos, es necesario utilizar el comando respectivo en la terminal:
bash
$ npm run start
$ npm run build
$ npm run deploy
NPM provee algunos alias, como npm start
que ejecuta lo mismo que npm run start
.
NPM te permite instalar paquetes en tu proyecto, sin embargo, NPX (Node Package Execute) permite ejecutar un comando de NPM remotamente.
Ejemplos de este comportamiento son los paquetes React y Nextjs, para iniciar un proyecto en estos se puede ejecutar los siguientes comandos, donde
bash
$ npx create-react-app <nombre>
$ npx create-next-app <nombre>
Contribución creada por Andrés Guano (Platzi Contributor).
Aportes 11
Preguntas 10
Una imágen dice más que mil palabras.
20/10/2022: NPM ya no soporta la instalación global de Create React App
Revisen la documentación actual de Create React App para corregirlo y aporvecharlo.
Si al intentar crear la aplicación con React
les da el siguiente error unknown command: "create-react-app"
es porque no tienen ese paquete instalado (de forma global). Así que primeron deben instalar el paquete, para luego poder crear la app:
npm install -g create-react-app
npx create-react-app react-npm
En el archivo package.json
encontraremos un apartado de scripts
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Podemos añadir n cantidad scripts y su estructura es la siguiente
"comando": "node directorio/del/script.js
Concatenar varios scripts
"node": "node src/primerScript.js" && "node src/segundoScript.js"
Si un script se llegase a “romper” no ejecutara el siguiente.
Tiene la capacidad de ejecutar un paquete que no fue instalado previamente.
Puedes ejecutar el siguiente comando para ver si ya está instalado para tu versión actual de npm:
which npx
Si no lo está, puede instalarlo así:
npm install -g npx
Si gustas leer mas sobre npx
https://www.freecodecamp.org/espanol/news/npm-vs-npx-cual-es-la-diferencia/
Cabe destacar que pueden encadenar los scripts e incluso un script puede ejecutar otro script
retomando mi ejemplo con cowsay (necesitas instalar cowsay y fortune):
"scripts": {
"cowsay": "fortune | cowsay",
"doublecowsay": "npm run cowsay && npm run cowsay"
}
Tendrás dos vaquitas diciendo frases cool!
Screen Shot 2022-08-22 at 22.18.50.png
Fuera de este ejemplo trivial, esto es muy útil, imagina encadenar el linter, los tests y la generación de un schema en graphql para tus tests, todo en un mismo comando, de lo más util y/o productivo que puedes hacer con npm
"scripts": {
"start":"node src/index.js"
},
Para ejecutar el comando tendremos que estar dentro de la carpeta raíz y ejecutamos el comando >npm run start
También podremos concatenar varios comandos en un solo script utilizando && para unirlos. Ejemplo:
"concat": "node src/index.js && node src/index.js"
Node Package Execute, nos permite ejecutar acciones particulares sin instalarlos. Lo ejecutamos y realizamos una tarea en particular. Ejemplo:
npx create-react-app my-app
Encontré una manera de que la vaquita diga nuestro console.log: la barra vertical | en bash (terminal linux) o zsh (terminal mac) es un comando llamado “pipe” que encadena nuestros comandos, haciendo al primero input del segundo y así sucesivamente. El comando sed -n 5p lo que hace es mostrarme solo la línea del console.log y no las típicas líneas que salen al inicio del comando npm run <script>. El comando sed viene de stream editor y lo que hace es modificar tu output. En este caso, yo quise que se imprimiera solo la línea 5, eso se hace con -n 5p; n silencia párrafos, hasta el inicio del quinto, donde está el console.log. ¡Espero sirva a alguien!
Hola,
Con Vite.js tienen una alternativa a create-react-app para iniciar un proyecto de React.js, y se puede ejecutar en el playground de Stackblitz desde el navegador ó con Node.js en un entorno local.
package.json
{
"name": "vite-react-starter",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.1.0",
"vite": "^3.1.6"
}
}
La dependencia moment nos ayuda a procesar fechas de forma más amigable en nuestro código.
📍 **Script:**
En Node, existen comando por defecto como lo son npm start, npm build. ****
Pero también podremos crear comandos personalizados.
**Estructura de un comando:**
```json
"ScriptName" : "node acción"
node: Palabra necesaria para que jale xd
acción: La ruta o source del script
ScriptName: Nombre por el cual será ejecutado en la Terminal
Ejecutar un comando:
Desde la terminal es necesario la siguiente estructura:
npm:
palabra que va de cajón
run:
palabra necesaria también
start:
En este caso, el nombre del script.
npm run start
**Cuando se ejecutan los *scripts defaults* no es necesario el** `run` ****
NPX:
Tiene la capacidad de ejecutar un paquete que no fue instalado previamente.
Partes de la sentencia:
npx: Palabra requerida de cajón
create-react-app: Acción, en este caso es un paquete
my-app: Argumento, en este caso es el nombre de asignado a la carpeta
Estoy usando WSL y me salió un error
“Cannot find module ‘internal/modules/cjs/loader.js’”
Para todo el que tenga el mismo problema:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.