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.

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

Scripts en 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.

NPX

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

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

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.

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

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