No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
19H
10M
38S

Comandos en NPM (Scripts)

8/15
Recursos

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.

C贸mo crear un comando en tu proyecto

Para crear un comando en tu proyecto, utiliza la siguiente estructura, donde es el nombre del comando que deber铆a ser muy descriptivo y es el comando que utilizar铆as en la terminal.

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 algunos comandos comunes

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.

C贸mo ejecutar un paquete de manera directa

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 es el nombre del proyecto:

bash $ npx create-react-app <nombre> $ npx create-next-app <nombre>

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 11

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渞omper鈥 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 鈥渟cripts鈥 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 鈥減ipe鈥 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

鈥淐annot find module 鈥榠nternal/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