Qu'est-ce que la commande 'react-scripts start'?

177

J'ai travaillé avec un projet React en utilisant create-react-appet j'ai deux options pour démarrer le projet:

Première manière:

npm run startavec la définition package.jsoncomme ceci:

"start": "react-scripts start",

Deuxième manière:

npm start

Quelle est la différence entre ces deux commandes? Et quel est le but du react-scripts start?

J'ai essayé de trouver la définition, mais je viens de trouver un paquet avec ce nom. Je ne sais toujours pas à quoi sert cette commande?

reactjs npm Felipe Augusto
la source
2
"start" est le nom d'un script, dans npmvous exécutez des scripts comme celui-ci npm run scriptName, npm startest aussi un raccourci pournpm run start
Sagiv bg
3
react-scripts startest la commande appropriée pour exécuter l'application React en mode dev. Cette commande est stockée dans package.json afin que vous n'ayez pas à la mémoriser et pouvez simplement taper l'habituel à la npm run startplace. npm startest un raccourci pour ce dernier.
Chris G

Réponses:

149

create-react-app et react-scripts

react-scriptsest un ensemble de scripts du create-react-appStarter Pack. create-react-app vous aide à lancer des projets sans configuration, vous n'avez donc pas à configurer votre projet vous-même.

react-scripts startconfigure l'environnement de développement et démarre un serveur, ainsi que le rechargement à chaud du module. Vous pouvez lire ici pour voir tout ce qu'il fait pour vous.

avec create-react-app, vous disposez des fonctionnalités suivantes prêtes à l'emploi.

  • Prise en charge de la syntaxe React, JSX, ES6 et Flow.
  • Extras de langage au-delà de ES6 comme l'opérateur de propagation d'objet.
  • CSS à préfixe automatique, vous n'avez donc pas besoin de -webkit- ou d'autres préfixes.
  • Un exécuteur de test unitaire interactif rapide avec prise en charge intégrée des rapports de couverture.
  • Un serveur de développement en direct qui avertit des erreurs courantes.
  • Un script de construction pour regrouper JS, CSS et images pour la production, avec des hachages et des sourcemaps.
  • Un agent de service hors ligne et un manifeste d'application Web, répondant à tous les critères d'application Web progressive.
  • Mises à jour sans tracas pour les outils ci-dessus avec une seule dépendance.

scripts npm

npm startest un raccourci pour npm run start.

npm runest utilisé pour exécuter des scripts que vous définissez dans l' scriptsobjet de votre package.json

s'il n'y a pas de startclé dans l'objet scripts, il sera par défautnode server.js

Parfois, vous voulez faire plus que ce que les scripts de réaction vous donnent, dans ce cas, vous pouvez le faire react-scripts eject. Cela transformera votre projet d'un état «géré» en un état non géré, où vous avez un contrôle total sur les dépendances, les scripts de création et d'autres configurations.

Luke
la source
Savez-vous comment l'exécuter en production?
user269867
10
pour l'utiliser dans des productions diriez-vous npm run build. cela créera un dossier de construction. ce dossier, vous pouvez ensuite servir. par exemple npm install -g serve, puis serve -s build facebook.github.io/create-react-app/docs/deployment
Luc
Les trois premiers liens renvoient tous à la même URL.
Andrew Grimm
a changé le deuxième lien en "ce qui est inclus"
Luc
64

Comme l'a souligné Sagiv bg, la npm startcommande est un raccourci pour npm run start. Je voulais juste ajouter un exemple réel pour le clarifier un peu plus.

La configuration ci-dessous provient du create-react-apprepo github. Le package.jsondéfinit un ensemble de scripts qui définissent le flux réel.

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

Pour plus de clarté, j'ai ajouté un diagramme. entrez la description de l'image ici

Les cases bleues sont des références à des scripts, que vous pouvez tous exécuter directement avec une npm run <script-name>commande. Mais comme vous pouvez le voir, il n'y a en fait que 2 flux pratiques:

  • npm run start
  • npm run build

Les cases grises sont des commandes qui peuvent être exécutées à partir de la ligne de commande.

Ainsi, par exemple, si vous exécutez npm start(ou npm run start) cela se traduit réellement par la npm-run-all -p watch-css start-jscommande, qui est exécutée à partir de la ligne de commande.

Dans mon cas, j'ai cette npm-run-allcommande spéciale , qui est un plugin populaire qui recherche les scripts commençant par "build:" et les exécute tous. En fait, je n'en ai pas qui correspondent à ce modèle. Mais il peut également être utilisé pour exécuter plusieurs commandes en parallèle, ce qu'il fait ici, en utilisant le -p <command1> <command2>commutateur. Donc, ici, il exécute 2 scripts, à savoir watch-csset start-js. (Ces derniers scripts mentionnés sont des observateurs qui surveillent les modifications de fichiers et ne se termineront qu'une fois supprimés.)

  • Le watch-csss'assure que les *.scssfichiers sont traduits en *.cssfichiers et recherche les futures mises à jour.

  • Les start-jspoints vers react-scripts startqui héberge le site Web en mode développement.

En conclusion, la npm startcommande est configurable. Si vous voulez savoir ce qu'il fait, vous devez vérifier le package.jsonfichier. (et vous voudrez peut-être faire un petit diagramme lorsque les choses se compliquent).

bvdb
la source
3

"start" est le nom d'un script, dans npm vous exécutez des scripts comme celui-ci npm run scriptName, npm start est également un raccourci npm run start

Quant aux "react-scripts", il s'agit d'un script lié spécifiquement à create-react-app

Sagiv bg
la source