Что такое команда «запускать сценарии реагирования»?

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

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

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

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

• React, JSX, ES6, and Flow syntax support.
• Language extras beyond ES6 like the object spread operator.
• Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
• A fast interactive unit test runner with built-in support for coverage reporting.
• A live development server that warns about common mistakes.
• A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
• An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
• Hassle-free updates for the above tools with a single dependency.

скрипты npm

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

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

если в объекте сценария нет ключа start, по умолчанию используется node server.js

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

"start" - это имя скрипта, в npm вы запускаете такие скрипты, как этот npm run scriptName, npm startтакже является сокращением отnpm run start

Что касается "сценариев реакции", то это сценарий, относящийся именно к создать-реагировать-приложение.

Как Сагив б.г. Как уже отмечалось, команда 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. (и вы можете сделать небольшую диаграмму, когда все станет сложнее).