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

react js app

Question

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

Primera forma:

npm run start con la definición en package.json esta manera:

"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 del react-scripts start ?

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

Answer 1

crear-reaccionar-aplicación y reaccionar guiones

react-scripts es un conjunto de scripts del paquete de inicio create-react-app . create-react-app le ayuda a iniciar proyectos sin configurar, por lo que no tiene que configurar su proyecto por sí mismo.

react-scripts start configura el entorno de desarrollo e inicia un servidor, así como la recarga de módulos en caliente. Puedes leer here para ver todo lo que hace por ti.

Con la aplicación create-react-app tiene las siguientes funciones fuera de la caja.

• React, JSX, ES6 y soporte de sintaxis de flujo.
• Extras de lenguaje más allá de ES6 como el operador de propagación de objetos
• Autoprefixed CSS, por lo que no necesita -webkit- u otros prefijos.
• Un corredor de prueba de unidad interactiva rápida 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 sourcemaps.
• Un primer trabajador de servicio fuera de línea 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 start es un acceso directo para npm run start .

npm run se utiliza para ejecutar scripts que usted define en el objeto de scripts de su paquete.json

Si no hay una clave de start en el objeto de scripts, se establecerá de forma predeterminada en node server.js

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

Answer 2

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

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

Answer 3

Como señaló Sagiv bg, el comando npm start es un acceso directo 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 repositorio github create-react-app . El package.json define 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, he añadido un diagrama.

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

• npm run start
• npm run build

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

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

En mi caso, tengo este npm-run-all especial npm-run-all , que es un complemento popular que busca scripts que comienzan con "build:", y ejecuta todos esos. En realidad no tengo ninguno que coincida con ese patrón. Pero también tiene 2 parámetros después del interruptor -p , que son otros scripts. Entonces, aquí actúa como una taquigrafía para ejecutar esos 2 scripts. (es decir, watch-css y start-js )

• El watch-css se asegura de que los archivos *.scss se traduzcan a archivos *.scss , y busca actualizaciones futuras.

• El start-js apunta al react-scripts start que aloja el sitio web en un modo de desarrollo.

En conclusión, el npm start es configurable. Si desea saber qué hace, entonces debe verificar el archivo package.json . (y es posible que desee hacer un pequeño diagrama cuando las cosas se compliquen).