Qu'est-ce que le démarrage des scripts de #39/réagir #39 la commande ?

Question

J'ai travaillé avec un projet React, à l'aide de create-react-app, et j'ai deux options pour démarrer le projet:

Première façon:

npm run start avec la définition à l' package.json comme ceci:

"start": "react-scripts start",

Deuxième façon:

et npm start

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

J'ai essayé de trouvé la définition, mais je viens de trouver un paquet avec le nom, et je ne sais toujours pas quel est le sens de cette commande.

Answer 1

créer-réagir application et de réagir-scripts

react-scripts est un ensemble de scripts à partir de la create-react-app pack de démarrage. créer-réagir-app vous aide à lancer des projets sans configuration, de sorte que vous n'avez pas l'installation de votre projet par vous-même.

react-scripts start met en place l'environnement de développement et démarre un serveur, ainsi que la chaude du module de rechargement. Vous pouvez lire ici pour voir ce que tout ce qu'il fait pour vous.

avec créez-réagir-app vous avez des fonctionnalités suivantes de la boîte.

• Réagir, JSX, ES6, et l'Écoulement en charge de la syntaxe.
• Langue extras-delà de l'ES6, comme l'objet de la propagation de l'opérateur.
• Autoprefixed CSS, de sorte que vous n'avez pas besoin d'-webkit - ou d'autres préfixes.
• Un rapide interactive de l'unité de test runner avec un support intégré pour la couverture de la production de rapports.
• En direct d'un serveur de développement qui met en garde sur les erreurs les plus courantes.
• Un script de génération de faisceau JS, CSS, et les images pour la production, avec des hachages et sourcemaps.
• Un hors-d'abord ouvrier de service et une application web se manifester, la réunion de tous les Progressistes Web App critères.
• Sans tracas mises à jour pour les outils ci-dessus avec une dépendance unique.

npm scripts

npm start est un raccourci pour npm run start.

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

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

Parfois, vous voulez faire plus que le réagir scripts vous donne, dans ce cas, vous pouvez le faire react-scripts eject. Cela va transformer votre projet à partir d'une "gestion" de l'état dans un pas de l'état à gestion, où vous avez le plein contrôle sur les dépendances, des scripts et d'autres configurations.

Answer 2

Comme Sagiv b.g. souligné, l' npm start de commande est un raccourci pour npm run start. Je voulais juste ajouter un exemple pour clarifier un peu plus.

La configuration ci-dessous provient de l' create-react-app dépôt github. L' package.json définit un tas de scripts qui définissent le débit 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.

Les cases bleues sont des références à des scripts, tout ce dont vous pourriez exécuté directement avec un npm run <script-name> commande. Mais comme vous pouvez le voir, en fait il y a seulement 2 pratique des flux:

• 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) que de traduire réellement à l' npm-run-all -p watch-css start-js de la commande qui est exécutée à partir de la ligne de commande.

Dans mon cas, je l' npm-run-all de commande, qui est un plugin populaire que les recherches pour les scripts de démarrage avec de construire":", et exécute l'ensemble de ceux-ci. Je n'ai actuellement pas de tout qui correspondent à ce modèle. Mais il dispose également de 2 paramètres après l' -p "switch", qui sont d'autres scripts. Donc, ici, il agit comme un raccourci pour exécuter ces 2 scripts. (c - watch-css et start-js)

• L' watch-css permet de s'assurer que l' *.scss des fichiers sont convertis en *.cssfichiers, et recherche les mises à jour futures.

• L' start-js de points à l' react-scripts start qui héberge le site web dans un mode de développement.

En conclusion, l' npm start commande est configurable. Si vous voulez savoir ce qu'il fait, alors vous devez vérifier l' package.json le fichier. (et vous pouvez faire un petit schéma quand les choses deviennent compliquées).

Answer 3

"start" est le nom d'un script, en npm vous exécutez des scripts comme celui-ci , est aussi un court pour``

En ce qui concerne les "réagir-scripts" il s'agit d'un script lié spécifiquement à créer-réagir-app