Che cos'è esattamente il comando 'reagire-script avvia'?

Ho lavorato con un progetto React, usando create-react-appe ho due opzioni per avviare il progetto:

Primo modo:

npm run startcon la definizione package.jsonsimile a questa:

"start": "react-scripts start",

Secondo modo:

e npm start

Qual è la differenza tra questi due comandi? E qual è lo scopo del react-scripts start?

Ho provato a trovare la definizione, ma ho appena trovato un pacchetto con il nome e ancora non so quale sia il significato di questo comando.

create -eagire-app e reagire-script

react-scripts è un insieme di script dal create-react-app Starter Pack. create-reply-app ti aiuta a dare il via ai progetti senza effettuare la configurazione, quindi non è necessario impostare il progetto da solo.

react-scripts startimposta l'ambiente di sviluppo e avvia un server, oltre a ricaricare il modulo a caldo. Puoi leggere qui per vedere cosa fa tutto per te.

con create -eagire-app hai le seguenti funzionalità pronte all'uso.

• Supporto per sintassi React, JSX, ES6 e Flow.
• Extra di lingua oltre ES6 come l'operatore di diffusione dell'oggetto.
• CSS con correzione automatica, quindi non è necessario -webkit- o altri prefissi.
• Un corridore di test di unità interattivo veloce con supporto integrato per il reporting di copertura.
• Un server di sviluppo live che avverte di errori comuni.
• Uno script di build per raggruppare JS, CSS e immagini per la produzione, con hash e sourcemap.
• Un operatore del servizio offline-first e un manifest di app Web, che soddisfano tutti i criteri di App Web progressiva.
• Aggiornamenti senza problemi per gli strumenti di cui sopra con un'unica dipendenza.

script npm

npm startè una scorciatoia per npm run start.

npm runviene utilizzato per eseguire script definiti scriptsnell'oggetto di package.json

se non è presente alcuna startchiave nell'oggetto script, verrà automaticamente impostato sunode server.js

A volte vuoi fare di più di quello che ti dà lo script di reazione, in questo caso puoi farlo react-scripts eject. Questo trasformerà il tuo progetto da uno stato "gestito" in uno stato non gestito, in cui hai il pieno controllo delle dipendenze, costruisci script e altre configurazioni.

Come ha sottolineato Sagiv bg, il npm startcomando è una scorciatoia per npm run start. Volevo solo aggiungere un esempio di vita reale per chiarire un po 'di più.

L'impostazione seguente proviene dal create-react-apprepository github. La package.jsondefinisce un insieme di script che definiscono il flusso effettivo.

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

Per chiarezza, ho aggiunto un diagramma.

Le caselle blu sono riferimenti a script, che è possibile eseguire direttamente con un npm run <script-name>comando. Ma come puoi vedere, in realtà ci sono solo 2 flussi pratici:

• npm run start
• npm run build

Le caselle grigie sono comandi che possono essere eseguiti dalla riga di comando.

Quindi, ad esempio, se si esegue npm start(o npm run start) che si traduce effettivamente nel npm-run-all -p watch-css start-jscomando, che viene eseguito dalla riga di comando.

Nel mio caso, ho questo npm-run-allcomando speciale , che è un plugin popolare che cerca script che iniziano con "build:" ed esegue tutti quelli. In realtà non ne ho nessuno che corrisponda a quel modello. Ma può anche essere usato per eseguire più comandi in parallelo, cosa che fa qui, usando l' -p <command1> <command2>opzione. Quindi, qui esegue 2 script, ovvero watch-csse start-js. (Questi ultimi script citati sono osservatori che monitorano le modifiche ai file e finiranno solo quando vengono uccisi.)

• Si watch-cssassicura che i *.scssfile vengano tradotti in *.cssfile e cerca aggiornamenti futuri.

• I start-jspunti a react-scripts startcui ospita il sito Web in una modalità di sviluppo.

In conclusione, il npm startcomando è configurabile. Se vuoi sapere cosa fa, devi controllare il package.jsonfile. (e potresti voler fare un piccolo diagramma quando le cose si complicano).

"start" è il nome di uno script, in npm si eseguono script come questo npm run scriptName, npm start è anche l'abbreviazione di npm run start

Per quanto riguarda "reagire-script" questo è uno script legato in modo specifico a creare-reagire-app