Що саме є командою "реагувати-скрипти запуску"?

Я працював з проектом React, використовуючи, create-react-appі у мене є два варіанти для запуску проекту:

Перший спосіб:

npm run startз визначенням на package.jsonзразок цього:

"start": "react-scripts start",

Другий спосіб:

npm start

Яка різниця між цими двома командами? І яка мета цього react-scripts start?

Я спробував знайти визначення, але я просто знайшов пакунок з такою назвою. Я досі не знаю, в чому полягає використання цієї команди?

create-react-app та react-script

react-scripts- це набір сценаріїв із create-react-appстартового пакету. додаток create-react допоможе вам починати проекти без налаштування, тому вам не доведеться самостійно налаштовувати проект.

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

за допомогою create-react-app у вас є наступні функції.

• Підтримка синтаксису React, JSX, ES6 та Flow.
• Мовні додатки за межами ES6, як оператор розповсюдження об'єктів.
• Автопрефіксований CSS, тому вам не потрібні -webkit- або інші префікси.
• Швидкий інтерактивний тестовий бігун з вбудованою підтримкою для звітування про покриття
• Живий сервер розвитку, який попереджає про поширені помилки.
• Сценарій побудови для поєднання JS, CSS та зображень для виробництва з хешами та вихідними картами.
• Професійний сервіс і маніфест веб-програми, який відповідає всім критеріям прогресивного веб-додатка.
• Безпроблемні оновлення для вищезазначених інструментів з однією залежністю.

сценарії npm

npm start- це ярлик для npm run start.

npm runвикористовується для запуску скриптів, визначених у scriptsоб’єкті пакета.json

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

Іноді ви хочете зробити більше, ніж дає сценарій реагування, в цьому випадку ви можете це зробити react-scripts eject. Це перетворить ваш проект із "керованого" стану в некерований стан, де ви маєте повний контроль над залежностями, будуєте сценарії та інші конфігурації.

Як вказував Сагів bg, npm startкоманда - це ярлик для npm run start. Я просто хотів додати приклад із реального життя, щоб трохи прояснити це.

Нижче наведено налаштування від create-react-appgithub repo. 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>командою. Але, як бачите, насправді існує лише два практичні потоки:

• 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файл. (і ви, можливо, захочете скласти невелику схему, коли все ускладниться).

"start" - це назва сценарію, у npm ви запускаєте такі сценарії npm run scriptName, npm start також є скороченням для npm run start

Що стосується "react-script", це сценарій, пов'язаний спеціально для створення-реагування-додатка