Clase 8 de 15 • Curso de NPM: Gestión de Paquetes y Dependencias en JavaScript
Contenido del curso
Irving Caamal
Reinaldo Mendoza
Felix Torres Javier Antonio
David Muñoz Sáez
Diego Toro Cárdenas
Andy Simancas
Elmer Sandoval Acosta
Orlando Perez
Reinaldo Mendoza
Gabriel Omar Gramajo
Eduardo Reyes
Irving Caamal
Benjamín Morales
Facundo Hetze
Bruno Nicolás Barajas Correa
JUAN CAMILO CAMPO TANGARIFE
Porfirio González López
Herald Flores
Woldev S.A.S
Jose Reynoso
Woldev S.A.S
Woldev S.A.S
Alan Cabrera
Alexandra Gabriela
Johanna Andrade Rivera
Nestor Rios Garcia
William Villegas
Fritz Guzmán Santiago
DAVID GONZALO MESA PERDOMO
Benjamín Morales
Diana Clabel
José Francisco Del Rio Díaz
Pedro Andrés Chaparro Quintero
Juan José Mamani Tarqui
Una imágen dice más que mil palabras.
Genio
Vaya dato interesante!!!
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.
npx create next app
si ya instalamos la de la clase, se puede actualizar o eliminamos e instalamos esta?
El curso y el profesor son excelentes pero el comando npx create-react-app ya no se usa, ahora react pide usar los framework next, remix y gatsby, en el enlce del profe nos dice eso.
Recomendación: El curso deberia de actualizarce.
Saludos.
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
Con npx no necesitas tenerlo instalado en tu maquina
La idea de npx que utilizar paquetes sin tener que instalarlos y como dijeron más abajo, desde 20/10/2022 NPM ya no soporta la instalación global de Create React App.
🍃 Tengo que admitir que me emocioné solo de ver que estábamos instalando React. Ya quiero llegar a ese punto.
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
Alguien sabe porque me aparece este error
puena ❯ npm run start > npm-init@1.0.0 start > node src/index.js '\\wsl.localhost\Ubuntu-20.04\home\puena\PersonalProject\npm\npm-init' CMD.EXE se inició con esta ruta como el directorio actual. No se permiten rutas UNC. Regresando de manera predeterminada al directorio Windows. node:internal/modules/cjs/loader:998 throw err; ^ Error: Cannot find module 'C:\Windows\src\index.js' at Module._resolveFilename (node:internal/modules/cjs/loader:995:15) at Module._load (node:internal/modules/cjs/loader:841:27) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) at node:internal/main/run_main_module:23:47 { code: 'MODULE_NOT_FOUND', requireStack: [] } Node.js v18.12.0
hola, me pasó lo mismo, pudiste solucionarlo?
A mí me salió un error muy identico, lo que pienso que pasó es que sólo hice la instalación en el S.O de Windows pero como estoy usando el kernel de Linux me faltó instalarlo ahí. Asi que lo que hice fue la instalación en el apartado de Ubuntu, me ayudó el siguiente link: https://learn.microsoft.com/es-mx/windows/dev-environment/javascript/nodejs-on-wsl
Sin embargo, si todo lo estás haciendo con windows, ahí sí desconozco. Yo hice la instalación en ubuntu, volví a ejecutarlo en la terminal de ubuntu y ya me funcionó. Ojala les pueda servir este aporte
Comandos en NPM (Scripts)
Comandos personalizados
"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"
Comandos con NPX
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
Fuente
📍 **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
Hola, Con 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" } }
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!
Para no complicarte mucho puedes usar lo siguiente:
read -p "Ingresa el texto: " text cowsay $text
Espero te sirva, sigue aprendiendo!
La dependencia moment nos ayuda a procesar fechas de forma más amigable en nuestro código.
¿Hay alguna manera de hacer que la vaquita diga el console.log de nuestro index.js en terminal?
Puedes usar este comando y haría lo que dices. :)
npm start | cowsay
¿Qué son los scripts en npm?
Los scripts en npm son comandos personalizados que puedes definir en tu archivo package.json para automatizar tareas comunes relacionadas con tu proyecto. Estos scripts se pueden ejecutar usando el comando npm run.
Ejemplos de scripts esenciales:
Buenas prácticas para los scripts de npm:
Ejemplo de un archivo package.json con scripts:
{ "name": "mi-proyecto", "version": "1.0.0", "scripts": { "start": "node index.js", "build": "webpack", "test": "mocha", "lint": "eslint .", "fix": "eslint . --fix" } }
Cómo ejecutar un script de npm:
Para ejecutar un script de npm, utiliza el siguiente comando:
npm run nombre-del-script
Por ejemplo, para ejecutar el script "start" del ejemplo anterior, ejecutarías el siguiente comando:
npm run start ```} }
En este ejemplo, el archivo package.json define los siguientes scripts:
De acuerdo a la página oficial de React, podemos ver que ese comando que nos recomiendan en la clase ya está obsoleto, de igual manera al hacer la prueba de instalación podermos ver la alerta
Página Oficial React 👇
Al probar con uno de los comandos actualizados, podemos realizar la instalación de otros componentes para nuestro proyecto de forma correcta y sin errores.
Me dio muchos problemas hacerlo como lo hizo el profe con la parte de react, ya que me dio bastantes errores y me salía que varias dependencias ya eran deprecadas
Les recomiendo que lo hagan con vite:
npm create vite@latest my-app ✔ Select a framework: › React ✔ Select a variant: › JavaScript Scaffolding project in /mnt/c/Users/NESTOR/OneDrive/ESTUDIOS/Platzi/JavaScript_School/Curso-de-NPM/my-app... Done. Now run: cd my-app npm install npm run dev
Pueden ver gratis la primera parte de esto en el libro de 'Aprendiendo React' de Carlos Azaustre en Kindle
No cabe duda que estar actualizado en esta profesión es un obligatorio
eres un grande definitivamente, estuve como 2 horas intentando instalar react con el comando npx create-next-app@latest y sólo me salían esos mismos errores de dependencias deprecadas y si no es porque leo tu comentario siguiera ahí atrapado JAJAJA gracias 🙏
npm create vite@latest
por favor alguien que me diga como tener mi terminal asi como la del profe
Intala oh my posh, no encuentro el tema del profe pero si puedes cambiar el tema en tu terminal https://ohmyposh.dev/
Entiendo que npm instala un paquete y npx ejecuta un paquete pero ¿Cual es la diferencia entre instalar un paquete y ejecutar un paquete?
Hola! Al instalar un paquete únicamente descargas los archivos necesarios para el funcionamiento del paquete y otros archivos de configuración, los cuales se guardan en la carpeta node_modules.
Con npx además de descargar los archivos del paquete también ejecutas su archivo de configuración inmediatamente. Aquí te dejo un ejemplo con el paquete eslint:
Puedes instalar con npm y luego ejecutar manualmente:
# Instalar npm i -D eslint # Ejecutar manualmente el archivo de node_modules ./node_modules/.bin/eslint --init
O puedes instalar y ejecutar automáticamente el archivo de node_modules con npx:
# Instalar y ejecutar automáticamente npx eslint --init
npm runn node
