web-dev-qa-db-fra.com

En quoi consiste exactement la commande 'react-scripts start'?

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

Première manière:

npm run start avec la définition au package.json comme ceci:

"start": "react-scripts start",

Deuxième manière:

et npm start

Quelle est la différence entre ces deux commandes? Et quel est l'objectif de react-scripts start?

J'ai essayé de trouver la définition, mais je viens de trouver un paquet portant le nom, mais je ne sais toujours pas quelle est la signification de cette commande.

reactjsnpm
72
Felipe Augusto

créer-réagir-app et réagir-scripts

react-scripts est un ensemble de scripts du create-react-app Starter Pack. create-react-app vous aide à lancer des projets sans configuration, vous évitant ainsi de configurer votre projet vous-même.

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

avec create-react-app , les fonctionnalités suivantes ne sont pas disponibles.

  • Réactivité, prise en charge de la syntaxe JSX, ES6 et Flow.
  • Les extras de langage au-delà de ES6 comme l'opérateur d'étalement d'objet.
  • CSS à préfixe automatique, vous n’avez donc pas besoin de -webkit- ou d’autres préfixes.
  • Testeur d'unité interactif rapide avec prise en charge intégrée des rapports de couverture.
  • Un serveur de développement en direct qui met en garde sur les erreurs courantes.
  • Un script de compilation permettant de regrouper JS, CSS et des images pour la production, avec des hachages et des cartes mères.
  • Un opérateur de service hors ligne et un manifeste d'application Web répondant à tous les critères de l'application Web progressive.
  • Mises à jour sans souci pour les outils ci-dessus avec une seule dépendance.

scripts npm

npm start est un raccourci pour npm run start.

npm run est utilisé pour exécuter les scripts que vous définissez dans l'objet scripts de votre package.json

s'il n'y a pas de clé start dans l'objet scripts, la valeur par défaut sera node server.js

Parfois, vous voulez faire plus que ce que les scripts de réaction vous donnent, dans ce cas, vous pouvez faire react-scripts eject. Cela transformera votre projet d'un état "géré" en un état non géré, dans lequel vous aurez un contrôle total sur les dépendances, les scripts de construction et autres configurations.

58
Luke

Comme Sagiv b.g. La commande npm start est un raccourci pour npm run start. Je voulais juste ajouter un exemple concret pour clarifier un peu plus.

La configuration ci-dessous provient du repo create-react-app github. Le package.json définit un ensemble de scripts définissant 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. enter image description here

Les zones bleues sont des références à des scripts, que vous pouvez exécuter directement avec une commande npm run <script-name>. Mais comme vous pouvez le constater, il n’ya en réalité que deux flux concrets:

  • 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) qui se traduisent en réalité par la commande npm-run-all -p watch-css start-js, qui est exécutée à partir de la ligne de commande.

Dans mon cas, j’ai cette commande spéciale npm-run-all, un plugin populaire qui recherche les scripts qui commencent par "build:" et les exécute tous. En fait, je n'en ai aucun qui corresponde à ce modèle. Mais il a également 2 paramètres après le commutateur -p, qui sont d’autres scripts. Donc, ici, il s'agit d'un raccourci pour exécuter ces 2 scripts. (i.e. watch-css et start-js)

  • Le watch-css s'assure que les fichiers *.scss sont traduits en *.cssfiles et recherche les mises à jour futures.

  • Le start-js pointe sur le react-scripts start qui héberge le site Web en mode de développement.

En conclusion, la commande npm start est configurable. Si vous voulez savoir ce que ça fait, alors vous devez vérifier le fichier package.json. (et vous voudrez peut-être faire un petit diagramme quand les choses se compliquent).

17
bvdb

"start" est le nom d'un script. Dans npm, vous exécutez des scripts tels que npm run scriptName, npm startest également un raccourci pournpm run start

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

3
Sagiv b.g