Что такое React scripts? Руководство для разработчиков

Если вы когда-либо создавали приложение React с помощью Create React App (CRA), вы использовали react-scripts. Но что именно эти скрипты делают за кулисами? В этом руководстве мы разберем, что такое react-scripts, что делает каждый скрипт и когда вам может понадобиться настроить или заменить его.

Что такое react-scripts?

react-scripts — это NPM-пакет, поставляемый с Create React App (CRA). Он содержит конфигурацию и скрипты, необходимые для запуска, сборки, тестирования и проверки React-приложения. Вместо того чтобы самостоятельно писать и поддерживать конфигурационные файлы Webpack, Babel или ESLint, CRA полагается на react-scripts для обработки этой сложности под капотом.

Когда вы создаете новое React-приложение с помощью CRA:

npx create-react-app my-app

CRA устанавливает react-scripts и настраивает стандартные скрипты в вашем package.json:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Что делают эти команды?

npm start

• Запускает сервер разработки с использованием Webpack Dev Server
• Включает горячую замену модулей (HMR)
• Использует Babel и переменные окружения (из .env)
• Открывает ваше приложение в браузере по умолчанию

npm run build

• Компилирует ваше приложение для продакшена
• Минифицирует JavaScript и CSS
• Генерирует статические файлы в директории build/
• Оптимизирует производительность (tree-shaking, сжатие)

npm test

• Запускает тесты с использованием Jest
• По умолчанию отслеживает изменения файлов
• Поддерживает отчеты о покрытии и мок-тестирование

npm run eject

• Копирует все конфигурации и зависимости в ваш проект
• Дает полный контроль над Webpack, Babel, ESLint и т.д.
• Необратимо — “отменить” невозможно

Какое место занимает react-scripts в CRA?

Create React App создает структуру проекта. Но именно react-scripts запускает приложение, создает бандл и выполняет всю тяжелую работу.

CRA без react-scripts не будет работать, если вы вручную не замените каждую базовую конфигурацию — что и происходит при выполнении eject.

Когда переопределять или заменять react-scripts

Иногда абстракция становится ограничивающей. Вам может понадобиться:

• Настроить загрузчики Webpack или алиасы
• Использовать другие плагины Babel
• Изменить поведение ESLint

У вас есть три варианта:

1. Eject

npm run eject

• Полный контроль, но сложный и необратимый

2. Переопределение без eject

• Используйте библиотеки типа:
  • craco (Create React App Configuration Override)
  • react-app-rewired
• Они оборачивают react-scripts и позволяют внедрять пользовательскую конфигурацию

3. Полная замена

• Если CRA больше не соответствует вашим потребностям, рассмотрите:
  • Vite
  • Next.js
  • Parcel

Распространенные ошибки и способы их исправления

'react-scripts' is not recognized as a command

• Обычно вызвано отсутствием node_modules
• Исправление:

rm -rf node_modules
rm package-lock.json
npm install

Сборка не удается после обновления пакета

• Проверьте, соответствует ли версия react-scripts вашей версии React
• Избегайте ручного обновления react-scripts без изучения списка изменений

Актуальны ли Create React App и react-scripts до сих пор?

Да — для начинающих, учебных проектов и быстрых прототипов CRA + react-scripts предлагает способ разработки с React без необходимости конфигурации. Но современные альтернативы, такие как Vite и Next.js, быстрее, гибче и более перспективны для крупных приложений.

Заключение

react-scripts — это то, что обеспечивает работу каждого React-приложения на базе CRA. Он обрабатывает сборку, тестирование, линтинг и многое другое, не раскрывая сложных инструментов. Если вы только начинаете, это отличный способ сосредоточиться на изучении самого React. По мере роста вашего приложения вы можете выбрать переопределение или переход на другие инструменты.

Часто задаваемые вопросы