Comandos en NPM (Scripts)

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.

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

🍃 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

Comandos en NPM (Scripts)

• En Node, existen comando por defecto como lo son npm start, npm build. Pero también podremos crear comandos personalizados.

Comandos personalizados

• Para crear comandos personalizados, haremos uso de nuestra sección de “scripts” agregando los comandos que necesites, creando como alias. Por ejemplo:

  "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"

• NOTA: si se rompe el primer comando, no funcionará el siguiente.

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

• Aquí crearemos un Proyecto nuevo de react, el cual contendrá su package.json y sus dependencias correspondientes.
• Para ejecutar la apliación utilizamos npm start

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"
  }
}

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

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!

La dependencia moment nos ayuda a procesar fechas de forma más amigable en nuestro código.

¿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:

• “start”: Inicia tu aplicación o servidor.
• “build”: Compila o empaqueta tu código para producción.
• “test”: Ejecuta pruebas unitarias o de integración.
• “lint”: Verifica el estilo y las convenciones de codificación de tu código.
• “fix”: Aplica correcciones automáticas a problemas de estilo o convenciones de codificación.

Buenas prácticas para los scripts de npm:

• Nombra tus scripts de manera descriptiva: Utiliza nombres que indiquen claramente el propósito del script.
• Mantén tus scripts concisos: Divide las tareas complejas en scripts más pequeños y manejables.
• Usa banderas y argumentos: Permite a los usuarios personalizar el comportamiento del script pasando banderas y argumentos.
• Documenta tus scripts: Proporciona comentarios o documentación para explicar el propósito y el uso de cada script.
• Prueba tus scripts: Asegúrate de que tus scripts funcionen como se espera antes de comprometerlos en tu repositorio.

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:

• start: Inicia la aplicación.
• test: Ejecuta pruebas unitarias, de integración y de linter.
• build: Compila la aplicación utilizando webpack.
• lint: Verifica el código en busca de errores de estilo.
• fix: Corrige automáticamente los errores de estilo.
• release: Crea una nueva versión del paquete y la publica en npm.

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

🔖 Archivos del Proyecto 🔖

Pasos 📌

• • En la terminal, estar dentro de la carpeta del proyecto que estamos trabajando (npm-init) y vamos a crear otra carpeta llamada: src con:

mkdir src

• • Abrimos el editor de códigos VS Code con:

code .

• • En VS Code, dentro de la carpeta src, creamos el archivo index.js, el código queda:

console.log('Hola Mundo!');

• • Dentro del archivo package.json, editamos el script y colocamos:

"scripts": {
		"start": "node src/index.js"
},

• • En la terminal para correr el comando agregado en la sesión de script, se ejecuta:

npm run start

• • Salida en la terminal después de ejecutar el comando:

> npm-init@1.0.0 start
> node src/index.js
Hola Mundo!

• • Si ejecutamos:

npm start

• • Hace lo mismo que el comando anterior.

• • Para correr dos scripts, en la sesión de scripts en el archivo packaje.json, se puede concatenar con los símbolos: &&, por ejemplo:

      "node": "node src/index.js && node src/index.js"

• • Al ejecutar:

npm run node

• • Se obtiene 2 veces el mensaje de “Hola Mundo!”.

• • Vamos a crear otro mini proyecto, cerramos VS Code, y nos devolvemos en la terminal a la carpeta principal del proyecto con el comando:

cd ..

• • Ejecutamos con npx la nueva app de react, se ejecuta:

npx create-react-app react-npm

• • Lo mas probable es que pregunte si queremos continuar con la instalación, se responde con “y”

• • Ya no es necesario inicializar el proyecto con npm, ya va incluido esas dependencias.

• • Salen los comandos que podemos usar, entramos a la carpeta react-npm:

cd react-npm

• • Ejecutamos el primer comando para trabajar en ese ambiente instalado:

npm start

• • Se abre un navegador con una app lista para mostrar el resultado.

• • Vamos a la terminal y cerramos el proceso presionando las teclas Ctrl + c

• • Luego vamos a VS Code ejecutando en la terminal:

code .

• • En el menú izquierdo se puede desplegar las carpetas y archivos creados para el proyeco de react.
   

Si al darle npm start ven un error asi:

>react-npm@0.1.0 start
> next start

[Error: ENOENT: no such file or directory, open '...npm/react-npm/.next/BUILD_ID'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '.../npm/react-npm/.next/BUILD_ID'

Lo pueden corregir haciendo

npm run build

Y luego le dan

npm run start

Y voilà, abren su navegador en

https://localhost:3000
(revisen en terminal el puerto ya que puede variar).

Estoy usando WSL y me salió un error

“Cannot find module ‘internal/modules/cjs/loader.js’”

Para todo el que tenga el mismo problema:

1. Borra la carpeta node_modules al igual que package-lock.json
2. Reinstala las dependecias
3. Reinicia el IDE
   Eso es todo, espero haber ayudado

Para crear un alias que ejecute un comando en especifico se debe omitir la palabra node Ejm:

"scripts": {
    "newDir": "mkdir newDirectory"
  },

al ejecutar el comando npm run newDir se creará un nuevo directorio.

npm create vite@latest

npm scripts

Una importante sección de el archivo de configuración (package.json) es scripts. Esta sección define un listado de propiedades que permiten ejecutar comandos dentro del contexto de tu proyecto incluyendo: comandos de otros paquetes listados como dependencias, scripts personalizados, scripts bash, etc.

Por defecto se crea un script para ejecutar el comando de test que, si no agregaste nada personalizado en el proceso de inicialización sólo tendrá una llamada al comando echo, es decir, al ejecutar en la terminal npm run test verás en la consola Error: no test specified

Un ejemplo de producción de esta sección es:

{
		...
		...
    "scripts": {
        "start": "npm run generate && PORT=5000 react-scripts start",
        "build": "react-scripts build",
        "storybook": "start-storybook -p 6006 -h localhost",
        "build-storybook": "build-storybook -s public",
        "test": "jest",
        "test:watch": "jest --watch --silent",
        "cypress": "cypress run",
        "eject": "react-scripts eject",
        "lint": "eslint src/**/*.{js,ts,tsx} --fix",
        "prettier": "npx prettier --write '**/*.tsx'",
        "generate": "graphql-codegen --config codegen.yml"
    },
    ...
		...
}

En este ejemplo podemos ver una lista de 11 scripts que cumplen diferentes tareas tales como:

• start: Primero ejecuta el script generate y luego inicia la aplicación web. react-scripts es una dependencia del paquete y se encuentra disponible dentro del directorio node_modules.
• build: Ejecuta la compilación de la aplicación en modo producción.
• lint: Ejecuta el proceso de linting (revisión de formato y estilo de código) del proyecto.
• test: Ejecuta el script de pruebas basado en el paquete jest que también está instalado como dependencia.
• prettier: Ejecuta prettier mediante el uso de npx. Este es un paquete especial de npm que permite ejecutar binarios dentro del alcance de tu proyecto sin necesidad de especificar dicho comando como script dentro del archivo package.json.

npx es una herramienta que se utiliza en el ecosistema de Node.js. Su nombre proviene de “Node Package Executor” (Ejecutor de Paquetes de Node). npx viene incluido con npm (Node Package Manager) a partir de la versión 5.2.0.

La función principal de npx es ejecutar paquetes de Node.js que no están globalmente instalados en tu sistema. Antes de npx, si querías ejecutar herramientas o scripts de Node.js que estaban disponibles en forma de paquetes, necesitabas instalarlos globalmente, lo que podía causar problemas de dependencias y versiones. npx resuelve este problema permitiéndote ejecutar paquetes de forma temporal sin necesidad de instalarlos globalmente.

Cuando utilizas npx, este busca y ejecuta el comando que le proporcionas como argumento. Si el paquete no está instalado localmente, npx lo descarga temporalmente, lo ejecuta y luego lo elimina. Esto es especialmente útil para ejecutar comandos de desarrollo, pruebas o scripts ocasionales sin tener que preocuparte por la instalación global o las versiones de los paquetes.

Por ejemplo, si tienes un paquete llamado create-react-app, en lugar de instalarlo globalmente con npm install -g create-react-app, puedes ejecutarlo directamente usando npx create-react-app mi-aplicacion sin preocuparte por si el paquete está instalado en tu sistema.

En resumen, npx es una herramienta que simplifica la ejecución de paquetes de Node.js y ayuda a gestionar las dependencias de manera más eficiente.

REAAAACT!!!