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

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?

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.

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.

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ą).

"start" to nazwa skryptu, w npm uruchamiasz takie skrypty npm run scriptName, npm start jest też skrótem od npm run start

Jeśli chodzi o „Reaguj-skrypty”, jest to skrypt związany konkretnie z aplikacją create-react-app