Czym dokładnie jest polecenie „start-skryptów reagowania”?

177

Pracowałem z projektem Reacta przy użyciu create-react-appi mam dwie możliwości rozpoczęcia projektu:

Pierwszy sposób:

npm run startz definicją w package.jsonten sposób:

"start": "react-scripts start",

Drugi sposób:

npm start

Jaka jest różnica między tymi dwoma poleceniami? Jaki jest cel react-scripts start?

Próbowałem znaleźć definicję, ale właśnie znalazłem pakiet o tej nazwie. Nadal nie wiem, do czego służy to polecenie?

reactjs npm Felipe Augusto
źródło
2
„start” to nazwa skryptu, w npmktórym uruchamiasz skrypty takie jak ten npm run scriptName, npm startjest również skrótem odnpm run start
Sagiv bg
3
react-scripts startto właściwe polecenie, aby uruchomić aplikację React w trybie deweloperskim. To polecenie jest przechowywane w package.json, więc nie musisz go zapamiętywać i możesz po prostu wpisać zwykłe npm run startzamiast tego. npm startjest skrótem do tego ostatniego.
Chris G

Odpowiedzi:

149

stwórz-reaguj-aplikację i reaguj-skrypty

react-scriptsto zestaw skryptów z create-react-apppakietu startowego. create-react-app pomaga w rozpoczynaniu projektów bez konieczności konfigurowania, więc nie musisz samodzielnie konfigurować projektu.

react-scripts startkonfiguruje środowisko programistyczne i uruchamia serwer, a także przeładowuje moduły na gorąco. Możesz przeczytać tutaj, aby zobaczyć, co robi dla Ciebie.

z aplikacją create-react-app masz następujące funkcje po wyjęciu z pudełka.

  • Obsługa składni React, JSX, ES6 i Flow.
  • Dodatki językowe poza ES6, takie jak operator rozszerzania obiektów.
  • Autoprefixed CSS, więc nie potrzebujesz -webkit- ani innych prefiksów.
  • Szybkie, interaktywne uruchamianie testów jednostkowych z wbudowaną obsługą raportowania pokrycia.
  • Serwer programistyczny na żywo, który ostrzega przed typowymi błędami.
  • Skrypt do tworzenia pakietów JS, CSS i obrazów na potrzeby produkcji, z hashami i mapami źródeł.
  • Pracownik usługowy działający w trybie offline i manifest aplikacji internetowej, spełniający wszystkie kryteria progresywnej aplikacji internetowej.
  • Bezproblemowe aktualizacje powyższych narzędzi z jedną zależnością.

skrypty npm

npm startjest skrótem do npm run start.

npm runsłuży do uruchamiania skryptów, które definiujesz w scriptsobiekcie twojego package.json

jeśli startw obiekcie skryptów nie ma klucza, domyślnie będzie tonode server.js

Czasami chcesz zrobić więcej, niż dają ci skrypty reakcji, w tym przypadku możesz zrobić react-scripts eject. Spowoduje to przekształcenie projektu ze stanu „zarządzanego” w stan niezarządzany, w którym masz pełną kontrolę nad zależnościami, skryptami kompilacji i innymi konfiguracjami.

Łukasz
źródło
Czy wiesz, jak uruchomić to na produkcji?
user269867
10
by użyć go w produkcjach, powiedzielibyście npm run build. spowoduje to utworzenie folderu kompilacji. ten folder możesz następnie służyć. np. npm install -g servea następnie serve -s build facebook.github.io/create-react-app/docs/deployment
Luke
Pierwsze trzy linki prowadzą do tego samego adresu URL.
Andrew Grimm
zmienił drugi link na „co zawiera”
Łukasz
64

Jak zauważył Sagiv bg, npm startpolecenie jest skrótem do npm run start. Chciałem tylko dodać przykład z życia, aby nieco to wyjaśnić.

Poniższa konfiguracja pochodzi z create-react-apprepozytorium github. package.jsonDefiniuje kilka skryptów, które określają rzeczywisty przepływ.

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

Dla jasności dodałem diagram. wprowadź opis obrazu tutaj

Niebieskie pola to odniesienia do skryptów, z których wszystkie można było wykonać bezpośrednio za pomocą npm run <script-name>polecenia. Ale jak widać, w rzeczywistości istnieją tylko 2 praktyczne przepływy:

  • npm run start
  • npm run build

Szare pola to polecenia, które można wykonać z wiersza poleceń.

Na przykład, jeśli uruchomisz npm start(lub npm run start), które faktycznie przekładają się na npm-run-all -p watch-css start-jspolecenie, które jest wykonywane z linii poleceń.

W moim przypadku mam to specjalne npm-run-allpolecenie, które jest popularną wtyczką, która wyszukuje skrypty zaczynające się od „build:” i wykonuje je wszystkie. Właściwie nie mam żadnego pasującego do tego wzorca. Ale może być również używany do uruchamiania wielu poleceń równolegle, co robi tutaj, używając -p <command1> <command2>przełącznika. Więc tutaj to wykonuje 2 skrypty, IE watch-cssi start-js. (Te ostatnie wymienione skrypty są obserwatorami, które monitorują zmiany plików i kończą się dopiero po zabiciu).

  • watch-cssZapewnia, że *.scsspliki są tłumaczone do *.cssplików i szuka przyszłych aktualizacjach.

  • Te start-jspunkty do react-scripts startktórego gospodarzem strony internetowej w trybie rozwoju.

Podsumowując, npm startpolecenie jest konfigurowalne. Jeśli chcesz wiedzieć, co robi, musisz sprawdzić package.jsonplik. (i możesz chcieć zrobić mały diagram, gdy sprawy się skomplikują).

bvdb
źródło