¿Qué es exactamente el comando 'react-scripts start'?

He estado trabajando con un proyecto React, usando create-react-app, y tengo dos opciones para comenzar el proyecto:

Primera forma:

npm run startcon la definición package.jsonasí:

"start": "react-scripts start",

Segunda forma:

y npm start

¿Cuál es la diferencia entre estos dos comandos? ¿Y cuál es el propósito de la react-scripts start?

Traté de encontrar la definición, pero acabo de encontrar un paquete con el nombre, y todavía no sé cuál es el significado de este comando.

crear-reaccionar-aplicación y reaccionar-scripts

react-scriptses un conjunto de scripts del create-react-apppaquete de inicio. create-react-app lo ayuda a iniciar proyectos sin configurar, para que no tenga que configurar su proyecto usted mismo.

react-scripts startconfigura el entorno de desarrollo e inicia un servidor, así como la recarga del módulo activo. Puedes leer aquí para ver todo lo que hace por ti.

con create-react-app tienes las siguientes características listas para usar.

• React, JSX, ES6 y soporte de sintaxis Flow.
• Extras de lenguaje más allá de ES6 como el operador de propagación de objetos.
• CSS autoprefijado, por lo que no necesita -webkit- u otros prefijos.
• Un corredor de prueba de unidad interactivo rápido con soporte incorporado para informes de cobertura.
• Un servidor de desarrollo en vivo que advierte sobre errores comunes.
• Un script de compilación para agrupar JS, CSS e imágenes para producción, con hashes y mapas de origen.
• Un primer trabajador de servicio sin conexión y un manifiesto de aplicación web que cumple con todos los criterios de la aplicación web progresiva.
• Actualizaciones sin problemas para las herramientas anteriores con una sola dependencia.

npm scripts

npm startes un acceso directo para npm run start.

npm runse usa para ejecutar scripts que usted define en el scriptsobjeto de su paquete.json

si no hay una startclave en el objeto de scripts, el valor predeterminado seránode server.js

A veces quieres hacer más de lo que te dan los scripts de reacción, en este caso puedes hacerlo react-scripts eject. Esto transformará su proyecto de un estado "administrado" a un estado no administrado, donde tiene control total sobre las dependencias, los scripts de compilación y otras configuraciones.

Como señaló Sagiv bg, el npm startcomando es un atajo para npm run start. Solo quería agregar un ejemplo de la vida real para aclararlo un poco más.

La configuración a continuación proviene del create-react-apprepositorio de github. El package.jsondefine un montón de scripts que definen el flujo real.

"scripts": {
  "start": "npm-run-all -p watch-css start-js",
  "build": "npm run build-css && react-scripts build",
  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
  "start-js": "react-scripts start"
},

Para mayor claridad, agregué un diagrama.

Los cuadros azules son referencias a scripts, todos los cuales puede ejecutar directamente con un npm run <script-name>comando. Pero como puede ver, en realidad solo hay 2 flujos prácticos:

• npm run start
• npm run build

Los cuadros grises son comandos que se pueden ejecutar desde la línea de comandos.

Entonces, por ejemplo, si ejecuta npm start(o npm run start) eso realmente se traduce al npm-run-all -p watch-css start-jscomando, que se ejecuta desde la línea de comandos.

En mi caso, tengo este npm-run-allcomando especial , que es un complemento popular que busca secuencias de comandos que comienzan con "build:" y ejecuta todas esas. En realidad no tengo ninguno que coincida con ese patrón. Pero también se puede usar para ejecutar múltiples comandos en paralelo, lo que hace aquí, usando el -p <command1> <command2>interruptor. Entonces, aquí ejecuta 2 scripts, es decir, watch-cssy start-js. (Esos últimos scripts mencionados son observadores que monitorean los cambios en los archivos y solo finalizarán cuando se eliminen).

• El watch-cssse asegura de que los *.scssarchivos se traduzcan a *.cssarchivos y busca futuras actualizaciones.

• Los start-jspuntos a los react-scripts startque aloja el sitio web en un modo de desarrollo.

En conclusión, el npm startcomando es configurable. Si quieres saber qué hace, entonces debes verificar el package.jsonarchivo. (y es posible que desee hacer un pequeño diagrama cuando las cosas se complican).

"inicio" es el nombre de un script, en npm ejecuta scripts como este npm run scriptName, npm start también es una abreviatura de npm run start

En cuanto a "react-scripts", este es un script relacionado específicamente con create-react-app