No tienes acceso a esta clase

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

Prep谩rate para tu pr贸ximo empleo comprando hoy a precio especial

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

8 D铆as
2 Hrs
31 Min
18 Seg

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 25

Preguntas 18

Ordenar por:

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

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

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.

馃崈 Tengo que admitir que me emocion茅 solo de ver que est谩bamos instalando React. Ya quiero llegar a ese punto.

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

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

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!

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

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

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

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 鈥楢prendiendo 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 鈥淗ola 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 鈥測鈥

  • 鈥 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

鈥淐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

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.

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

  • 鈥渟tart鈥: Inicia tu aplicaci贸n o servidor.
  • 鈥渂uild鈥: Compila o empaqueta tu c贸digo para producci贸n.
  • 鈥渢est鈥: Ejecuta pruebas unitarias o de integraci贸n.
  • 鈥渓int鈥: Verifica el estilo y las convenciones de codificaci贸n de tu c贸digo.
  • 鈥渇ix鈥: 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 鈥渟tart鈥 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.

npm create vite@latest

En npm, los scripts te permiten automatizar tareas comunes en el desarrollo de proyectos, como iniciar el servidor, ejecutar pruebas, compilar c贸digo, entre otros. Puedes definir y ejecutar scripts utilizando el archivo `package.json`. Aqu铆 tienes una gu铆a sobre c贸mo trabajar con scripts en npm: ### Definici贸n de scripts en package.json Dentro del archivo `package.json`, hay una secci贸n especial llamada "scripts" donde puedes definir tus propios comandos. Aqu铆 tienes un ejemplo de c贸mo se ve la secci贸n de scripts en `package.json`: json聽Copy code"scripts": { "start": "node server.js", "test": "mocha test/\*.js", "build": "webpack --config webpack.config.js" } Cada script se compone de un nombre (como "start", "test", "build") y el comando que se ejecutar谩 cuando se invoque el script. ### Ejecuci贸n de scripts Para ejecutar un script definido en `package.json`, utiliza el comando `npm run` seguido del nombre del script. Por ejemplo: * **Ejecutar el script "start"**:bash聽Copy codenpm run start * **Ejecutar el script "test"**:bash聽Copy codenpm run test * **Ejecutar el script "build"**:bash聽Copy codenpm run build ### Scripts predefinidos npm proporciona algunos scripts predefinidos que puedes ejecutar sin la necesidad de usar `run`. Algunos de los scripts predefinidos m谩s comunes son: * `npm start`: Ejecuta el script denominado "start". * `npm test`: Ejecuta el script denominado "test". * `npm install`: Instala las dependencias definidas en `package.json`. ### Uso de variables de entorno en scripts Puedes utilizar variables de entorno en tus scripts para personalizar su comportamiento. Por ejemplo, puedes definir un script que utilice una variable de entorno para configurar diferentes entornos de tu aplicaci贸n.
` 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.
Dale Like ! si quisieras que la secci贸n de comentarios se pudiera ocultar.

npx es una herramienta que se utiliza en el ecosistema de Node.js. Su nombre proviene de 鈥淣ode 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!!!