Я работал с проектом React, используя create-react-app, и у меня есть два варианта запуска проекта:
Первый способ:
npm run start с определением в package.json, например:
"start": "react-scripts start",
Второй способ:
npm start
В чем разница между этими двумя командами? И какова цель react-scripts start?
Я попытался найти определение, но только что нашел пакет с таким именем. Я до сих пор не знаю, в чем польза этой команды?
react-scripts - это набор скриптов из начального пакета create-react-app. create-response-app помогает запускать проекты без настройки, поэтому вам не нужно настраивать свой проект самостоятельно.
react-scripts start настраивает среду разработки и запускает сервер, а также выполняет перезагрузку горячего модуля. Вы можете прочитать здесь, чтобы узнать, что все это делает для вас.
с помощью create-react-app у вас есть следующие готовые возможности.
- Поддержка синтаксиса React, JSX, ES6 и Flow.
- Дополнительные языковые возможности помимо ES6, такие как оператор распространения объекта.
- CSS с автопрефиксом, поэтому вам не нужны -webkit- или другие префиксы.
- Быстрый интерактивный инструмент запуска модульных тестов со встроенной поддержкой отчетов о покрытии.
- Живой сервер разработки, предупреждающий о типичных ошибках.
- Скрипт сборки для объединения JS, CSS и изображений для производства с хешами и исходными картами.
- Service worker, работающий в автономном режиме, и манифест веб-приложения, отвечающий всем критериям Progressive Web App.
- Беспроблемные обновления для вышеуказанных инструментов с одной зависимостью.
npm start - это ярлык для npm run start.
npm run используется для запуска сценариев, которые вы определяете в объекте scripts вашего package.json
если в объекте сценария нет ключа start, по умолчанию будет node server.js
Иногда вы хотите сделать больше, чем дают вам сценарии реакции, в этом случае вы можете сделать react-scripts eject. Это преобразует ваш проект из «управляемого» состояния в неуправляемое состояние, в котором у вас есть полный контроль над зависимостями, сценариями сборки и другими конфигурациями.
npm run build. это создаст папку сборки. эту папку вы затем можете обслуживать. например npm install -g serve, а затем serve -s build facebook.github.io/create-react-app/docs/deployment
- person Luke; 11.01.2019
react-scripts должен быть включен в проект как devDependency, верно? Или он должен быть в обычном dependency разделе package.json?
- person Brady Dowling; 04.08.2020
Как Сагив б.г. отметил, что команда 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 файлы переведены в *.cssfiles, и ожидает будущих обновлений.
start-js указывает на react-scripts start, на котором размещен веб-сайт в режиме разработки.
В заключение, команду npm start можно настроить. Если вы хотите знать, что он делает, вам нужно проверить package.json файл. (и вы можете сделать небольшую диаграмму, когда все станет сложнее).
"start" - это имя сценария, в npm вы запускаете такие сценарии npm run scriptName, npm start также является коротким для npm run start
Что касается «сценариев реакции», это сценарий, связанный конкретно с создать-реагировать-приложение
npmвы запускаете такие сценарииnpm run scriptName,npm startтакже является сокращением отnpm run start- person Sagiv b.g schedule 06.06.2018react-scripts start- правильная команда для запуска приложения React в режиме разработки. Эта команда хранится в package.json, поэтому вам не нужно запоминать ее, и вместо нее можно просто ввести обычныйnpm run start.npm start- это ярлык для последнего. - person Chris G schedule 06.06.2018