Como npm no proporciona una forma sencilla de ejecutar varios scripts en paralelo, podemos intentar encontrar una solución de la siguiente manera:
Cree un proyecto básico de React App en el servidor Localhost y, al mismo tiempo, queremos ejecutar la operación de compilación del proyecto. Ahora, lo que podemos hacer es usar el paquete npm-run-all , lo que nos facilitará alojar el proyecto en el servidor Localhost, y también podemos ejecutar la compilación optimizada para producción simultáneamente.
Enfoque 1 (npm-run all package): podemos usar el paquete «npm-run all» para ejecutar diferentes scripts al mismo tiempo. Primero, tenemos que instalar el paquete en sí usando el comando.
npm install npm-run-all — save-dev
Después de la instalación del paquete, debemos navegar hasta el archivo package.json del proyecto, y podemos ver que hay dos operaciones enumeradas dentro de los «scripts», es decir , «start» y «build» que necesitamos para alojar el proyecto en el servidor y ejecutar la operación de compilación simultáneamente.
Ahora, nuestro siguiente paso sería abrir una terminal en Mac o símbolo del sistema en Windows y «cd» en el directorio del proyecto y escriba el comando «./node_modules/.bin/npm-run-all build start» y presione Entrar .
En el caso de instalación local que hicimos, npm-run-all se instalará en el
directorio node_modules de nuestro proyecto. La variable de entorno PATH no se incluye allí, por lo que tenemos que usar
./node_modules/.bin/npm-run-all (or $(npm bin)/npm-run-all) to run npm-run-all command.
Salida de la consola:
La operación de compilación se ejecutó con éxito
La aplicación está alojada con éxito en el servidor.
Por lo tanto, ahora podemos ver que nuestra aplicación está alojada con éxito en un servidor local y que la operación de compilación se ejecutó perfectamente con la ayuda de un solo paquete «npm-run-all».
Salida del navegador:
Enfoque 2 (Uso del paquete Concurrently): en este enfoque, usaremos el paquete Concurrently. Con este paquete, podemos combinar diferentes comandos de script, como «npm run start» y «npm run build» en un solo script y luego ejecutarlo en la línea de comando.
Primero, instale el paquete en el directorio de su proyecto usando este comando:
npm install concurrently --save
Nuevamente, después de la instalación del paquete, tenemos que navegar hasta el archivo package.json del proyecto, y podemos ver que hay dos operaciones enumeradas dentro de los «scripts», es decir, «iniciar» y «compilar» que necesitamos para alojar el proyecto en el servidor y ejecutar la operación de compilación simultáneamente.
Ahora tenemos que incluir un script de desarrollo dentro de los scripts en el archivo package.json que contendrá nuestros diferentes comandos combinados.
Con el interruptor –kill-others , todos los comandos se eliminan si uno muere.
Podemos seguir esto para crear nuestro propio script de desarrollo:
"dev": "concurrently \"command1 arg\" \"command2 arg\""
Ahora podemos simplemente ejecutar todo el comando simplemente usando:
npm run dev
Salida de la consola:
