Что именно представляет собой команда «response-scripts start»?

177

Я работал с проектом React с использованием, create-react-appи у меня есть два варианта, чтобы начать проект:

Первый способ:

npm run startс определением на вот package.jsonтак:

"start": "react-scripts start",

Второй способ:

npm start

В чем разница между этими двумя командами? И какова цель этого react-scripts start?

Я попытался найти определение, но я только что нашел пакет с этим именем. Я до сих пор не знаю, какая польза от этой команды?

reactjs npm Фелипе Аугусто
источник
2
«start» - это имя сценария, в котором npmвы запускаете такие сценарии npm run scriptName, npm startэто также сокращение отnpm run start
Sagiv bg
3
react-scripts startправильная команда для запуска приложения React в режиме разработки. Эта команда хранится в package.json, поэтому вам не нужно ее запоминать, и npm run startвместо этого вы можете просто ввести обычный . npm startявляется ярлыком для последнего.
Крис Дж

Ответы:

150

создать-реагировать-приложение и реагировать-скрипты

react-scriptsэто набор скриптов из create-react-appначального пакета. create-реагировать-приложение поможет вам запустить проекты без настройки, поэтому вам не нужно настраивать свой проект самостоятельно.

react-scripts startустанавливает среду разработки и запускает сервер, а также горячую перезагрузку модуля. Вы можете прочитать здесь, чтобы увидеть, что все это делает для вас.

с create-реагировать-приложение у вас есть следующие функции из коробки.

  • Поддержка синтаксиса React, JSX, ES6 и Flow.
  • Языковые дополнения за пределами ES6, такие как оператор распространения объектов.
  • CSS с автопрефиксом, поэтому вам не нужны -webkit- или другие префиксы.
  • Быстрый интерактивный тестовый модуль со встроенной поддержкой отчетов о покрытии.
  • Живой сервер разработки, который предупреждает об общих ошибках.
  • Сценарий сборки для объединения JS, CSS и изображений для производства с хешами и исходными картами.
  • Первый автономный работник службы и манифест веб-приложения, отвечающий всем критериям Progressive Web App.
  • Без проблем обновления для вышеуказанных инструментов с одной зависимостью.

сценарии npm

npm startэто ярлык для npm run start.

npm runиспользуется для запуска сценариев, которые вы определили в scriptsобъекте вашего package.json

если startв объекте scripts нет ключа, по умолчаниюnode server.js

Иногда вы хотите сделать больше, чем дают сценарии реакции, в этом случае вы можете это сделать react-scripts eject. Это преобразует ваш проект из «управляемого» состояния в неуправляемое состояние, где вы имеете полный контроль над зависимостями, сценариями сборки и другими конфигурациями.

Люк
источник
Вы знаете, как запустить его на производстве?
user269867
10
использовать его в постановках, вы бы сказали npm run build. это создаст папку сборки. эту папку вы можете затем обслуживать. например, npm install -g serveа затем serve -s build facebook.github.io/create-react-app/docs/deployment
Луки
Первые три ссылки все ссылаются на один и тот же URL.
Эндрю Гримм
поменял вторую ссылку на "что включено"
Луки
64

Как указал Сагив Б.Г., эта npm startкоманда является ярлыком для npm run start. Я просто хотел добавить пример из жизни чтобы прояснить это немного подробнее.

Настройка ниже происходит из create-react-appрепозитория github. package.jsonОпределяет набор сценариев , которые определяют фактический поток.

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

Для наглядности я добавил схему. введите описание изображения здесь

Синие прямоугольники - это ссылки на сценарии, все из которых вы можете выполнить непосредственно с помощью npm run <script-name>команды. Но, как видите, на самом деле есть только 2 практических потока:

  • npm run start
  • npm run build

Серые поля - это команды, которые можно выполнить из командной строки.

Так, например, если вы запускаете npm start(или npm run start), что фактически переводите в npm-run-all -p watch-css start-jsкоманду, которая выполняется из командной строки.

В моем случае у меня есть эта специальная npm-run-allкоманда, которая является популярным плагином, который ищет скрипты, которые начинаются с «build:», и выполняет все из них. У меня на самом деле нет таких, которые соответствуют этому шаблону. Но его также можно использовать для параллельного запуска нескольких команд, что и здесь, с помощью -p <command1> <command2>переключателя. Итак, здесь он выполняет 2 скрипта, т.е. watch-cssи start-js. (Эти последние упомянутые скрипты являются наблюдателями, которые следят за изменениями файлов и заканчивают работу только после их закрытия.)

  • Он watch-cssобеспечивает *.scssпреобразование *.cssфайлов в файлы и ищет последующие обновления.

  • В start-jsуказывает на react-scripts startкотором находится сайт в режиме разработки.

В заключение npm startкоманда настраивается. Если вы хотите знать, что он делает, то вы должны проверить package.jsonфайл. (и вы можете сделать небольшую диаграмму, когда все усложняется).

bvdb
источник