Was genau ist der Befehl 'React-Scripts Start'?

174

Ich habe mit einem React-Projekt gearbeitet create-react-appund habe zwei Möglichkeiten, um das Projekt zu starten:

Erster Weg:

npm run startmit der Definition package.jsonwie folgt:

"start": "react-scripts start",

Zweiter Weg:

und npm start

Was ist der Unterschied zwischen diesen beiden Befehlen? Und was ist der Zweck des react-scripts start?

Ich habe versucht, die Definition zu finden, aber ich habe gerade ein Paket mit dem Namen gefunden, und ich weiß immer noch nicht, was die Bedeutung dieses Befehls ist.

reactjs npm Felipe Augusto
quelle
2
"Start" ist ein Name eines Skripts, in dem npmSie Skripte wie dieses ausführen npm run scriptName, npm startist auch eine npm run start
Abkürzung
3
react-scripts startist der richtige Befehl, um die React-App im Entwicklungsmodus auszuführen. Dieser Befehl ist in package.json gespeichert, sodass Sie ihn nicht auswendig lernen müssen und npm run startstattdessen einfach das Übliche eingeben können . npm startist eine Abkürzung für Letzteres.
Chris G

Antworten:

147

Create-React-App und React-Skripte

react-scriptsist eine Reihe von Skripten aus dem create-react-appStarter Pack. Mit der Create-React-App können Sie Projekte starten, ohne sie konfigurieren zu müssen, sodass Sie Ihr Projekt nicht selbst einrichten müssen.

react-scripts startRichtet die Entwicklungsumgebung ein und startet einen Server sowie das Neuladen von Hot-Modulen. Sie können hier lesen , um zu sehen, was alles für Sie bedeutet.

Mit der Create-React-App haben Sie sofort folgende Funktionen.

  • Unterstützung der React-, JSX-, ES6- und Flow-Syntax.
  • Sprach-Extras jenseits von ES6 wie der Objektverbreitungsoperator.
  • Autoprefixiertes CSS, sodass Sie kein Webkit oder andere Präfixe benötigen.
  • Ein schneller interaktiver Unit-Test-Runner mit integrierter Unterstützung für die Berichterstellung.
  • Ein Live-Entwicklungsserver, der vor häufigen Fehlern warnt.
  • Ein Build-Skript zum Bündeln von JS, CSS und Images für die Produktion mit Hashes und Sourcemaps.
  • Ein Offline-First-Service-Worker und ein Web-App-Manifest, die alle Progressive Web App-Kriterien erfüllen.
  • Problemlose Updates für die oben genannten Tools mit einer einzigen Abhängigkeit.

npm-Skripte

npm startist eine Abkürzung für npm run start.

npm runwird verwendet, um Skripte auszuführen, die Sie im scriptsObjekt Ihrer package.json definieren

Wenn startdas Skriptobjekt keinen Schlüssel enthält, wird standardmäßig der Schlüssel verwendetnode server.js

Manchmal möchten Sie mehr tun, als Ihnen die Reaktionsskripte bieten. In diesem Fall können Sie dies tun react-scripts eject. Dadurch wird Ihr Projekt von einem "verwalteten" Status in einen nicht verwalteten Status umgewandelt, in dem Sie die volle Kontrolle über Abhängigkeiten, Build-Skripte und andere Konfigurationen haben.

Luke
quelle
Wissen Sie, wie man es in der Produktion laufen lässt?
user269867
10
um es in Produktionen zu verwenden, würde man sagen npm run build. Dadurch wird ein Build-Ordner erstellt. Diesen Ordner können Sie dann bedienen. zB npm install -g serveund dann serve -s build facebook.github.io/create-react-app/docs/deployment
Luke
Die ersten drei Links verweisen alle auf dieselbe URL.
Andrew Grimm
änderte den zweiten Link zu "Was ist enthalten"
Luke
62

Wie Sagiv bg betonte, ist der npm startBefehl eine Abkürzung für npm run start. Ich wollte nur ein reales Beispiel hinzufügen , um es ein bisschen mehr zu verdeutlichen.

Das folgende Setup stammt aus dem create-react-appGithub-Repo. Das package.jsondefiniert eine Reihe von Skripten, die den tatsächlichen Ablauf definieren.

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

Aus Gründen der Übersichtlichkeit habe ich ein Diagramm hinzugefügt. Geben Sie hier die Bildbeschreibung ein

Die blauen Kästchen verweisen auf Skripte, die Sie alle direkt mit einem npm run <script-name>Befehl ausführen können. Aber wie Sie sehen können, gibt es tatsächlich nur zwei praktische Abläufe:

  • npm run start
  • npm run build

Die grauen Kästchen sind Befehle, die über die Befehlszeile ausgeführt werden können.

Zum Beispiel, wenn Sie das ausführen npm start(oder npm run start), das tatsächlich in den npm-run-all -p watch-css start-jsBefehl übersetzt wird, der über die Befehlszeile ausgeführt wird.

In meinem Fall habe ich diesen speziellen npm-run-allBefehl, ein beliebtes Plugin, das nach Skripten sucht, die mit "build:" beginnen, und alle diese ausführt. Ich habe eigentlich keine, die diesem Muster entsprechen. Es kann aber auch verwendet werden, um mehrere Befehle parallel auszuführen, was hier über den -p <command1> <command2>Schalter der Fall ist . Hier werden also 2 Skripte ausgeführt, dh watch-cssund start-js. (Diese zuletzt genannten Skripte sind Beobachter, die Dateiänderungen überwachen und erst beendet werden, wenn sie beendet werden.)

  • Das watch-cssstellt sicher, dass die *.scssDateien in *.cssDateien übersetzt werden, und sucht nach zukünftigen Updates.

  • Die start-jsPunkte, auf react-scripts startdenen die Website in einem Entwicklungsmodus gehostet wird.

Abschließend ist der npm startBefehl konfigurierbar. Wenn Sie wissen möchten, was es tut, müssen Sie die package.jsonDatei überprüfen . (und Sie möchten vielleicht ein kleines Diagramm erstellen, wenn die Dinge kompliziert werden).

bvdb
quelle
3

„Start“ ist ein Name eines Skripts, in npm Sie Skripts wie folgt ausführen npm run scriptName, npm start ist auch eine Abkürzung für npm run start

Bei "React-Skripten" handelt es sich um ein Skript, das sich speziell auf die Create-React-App bezieht

Sagiv bg
quelle