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