Вы работаете над проектом React и вам нужно запускать скрипты на другом порту? В этой статье блога мы рассмотрим несколько методов, которые позволят вам это сделать. Независимо от того, являетесь ли вы новичком или опытным разработчиком, мы предоставим вам простые для понимания объяснения и примеры кода. Итак, начнем!

Метод 1: изменение файла package.json
Один простой способ изменить порт, на котором выполняются сценарии React, — это изменить сценарий «start» в файле package.json. По умолчанию сценарии React используют порт 3000, но вы можете легко изменить его на любой доступный порт по вашему выбору. Вот как это можно сделать:

1. Откройте файл package.json в каталоге вашего проекта.
2. Найдите раздел «Скрипты».
3. Найдите сценарий «start» и добавьте флаг «–port», а затем желаемый номер порта. Например, чтобы работать на порту 4000, измените сценарий следующим образом:

"scripts": {
  "start": "react-scripts start --port 4000"
}

Метод 2: использование параметров интерфейса командной строки (CLI).
Скрипты React предоставляют параметры интерфейса командной строки (CLI), которые позволяют указать порт непосредственно при запуске приложения. Этот метод особенно полезен, если вы хотите временно запускать сценарии React на другом порту. Вот как это можно сделать:

1. Откройте терминал или командную строку.
2. Перейдите в каталог вашего проекта.
3. Выполните следующую команду, заменив <port-number>на нужный порт:

npm start -- --port <port-number>

Например, для работы на порту 5000 вы должны использовать:

npm start -- --port 5000

Метод 3: использование переменных среды
Другой подход к запуску сценариев React на другом порту — использование переменных среды. Этот метод позволяет динамически настраивать порт в зависимости от различных сред или конфигураций. Вот пример использования пакета cross-env:

1. Установите пакет Cross-env, выполнив следующую команду:

npm install cross-env --save-dev

1. Откройте файл package.json и измените сценарий «start» следующим образом:

"scripts": {
  "start": "cross-env PORT=<port-number> react-scripts start"
}

Замените <port-number>на нужный порт. Например, если вы хотите использовать порт 6000, скрипт должен выглядеть так:

"scripts": {
  "start": "cross-env PORT=6000 react-scripts start"
}

В этой статье мы рассмотрели три различных метода запуска сценариев React на другом порту. Предпочитаете ли вы изменить файл package.json, использовать параметры интерфейса командной строки (CLI) или использовать переменные среды, теперь у вас есть знания и примеры кода для достижения вашей цели. Не стесняйтесь выбирать метод, который лучше всего соответствует вашим требованиям и удачного программирования!