Что такое команда "реагировать на скрипты"?

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

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

npm run start с определением в package.json следующим образом:

"start": "react-scripts start",

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

и npm start

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

Приведенная ниже настройка происходит из репозитория github create-react-app. В 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"
},

Для наглядности я добавил схему. enter image description here

Синие прямоугольники - это ссылки на сценарии, все из которых вы можете выполнить напрямую с помощью команды 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:", и выполняет все из них. У меня на самом деле нет таких, которые соответствуют этому шаблону. Но он также имеет 2 параметра после переключателя -p, которые являются другими сценариями. Итак, здесь это действует как сокращение для выполнения этих двух сценариев. (т.е. watch-css и start-js)

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

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

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