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

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

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

"start": "запуск сценариев реакции",

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

начало npm

В чем разница между этими двумя командами? И какова цель запуска скриптов реакции?

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

Ответы (4)

create-response-app и сценарии реакции

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

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

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

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

скрипты npm

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

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

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

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

лаконично - он запускает это

node node_modules/react-scripts/bin/react-scripts.js start

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

Что касается «сценариев реакции», это сценарий, относящийся именно к create-response-app

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

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

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

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

  • запуск запуска npm
  • npm run build

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

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

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

  • watch-css обеспечивает перевод файлов *. Scss в файлы *. Cssи ищет обновления в будущем.

  • start-js указывает на начало сценариев реакции, на котором сайт находится в режиме разработки.

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

2022 WebDevInsider