Как установить build.env-переменные при запуске скрипта create-react-app?

Я использую следующую переменную среды в своем приложении create-response-app:

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

Он работает, когда я запускаю npm start, читая файл .env:

REACT_APP_API_URL=http://localhost:5555

Как установить другое значение, например http://localhost:1234 при выполнении npm run build?

Это мой файл package.json:

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Ответ 1

Вы можете использовать process.env.NODE_ENV следующим образом:

const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;

Вам необходимо установить REACT_APP_PROD_API_URL и REACT_APP_DEV_API_URL.

Или, если рабочий URL-адрес всегда один и тот же, вы можете упростить его:

const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;

Create React App устанавливает NODE_ENV на "производство" для вас при сборке, так что вам не нужно беспокоиться о том, когда установить его на производство.

Примечание: вы должны перезагрузить сервер (например, снова запустить npm start), чтобы обнаружить изменения переменных среды.

Ответ 2

Я предполагаю, что вы уже сейчас работали, но для тех, кто это находит, вы устанавливаете переменные среды по умолчанию в файл .env в корне вашего проекта "создать-реагировать-приложение".

Чтобы разделить переменные, используемые при npm start и npm run build вы можете создать еще два файла env - .env.development и .env.production.

npm start устанавливает REACT_APP_NODE_ENV для development, и поэтому он автоматически будет использовать файл .env.development, а npm run build REACT_APP_NODE_ENV для production, и поэтому он будет автоматически использовать .env.production. Значения, установленные в них, будут переопределять значения в вашем .env.

Если вы работаете с другими людьми и имеете значения, характерные только для вашей машины, вы можете переопределить значения в .env.development и .env.production, добавив эти значения в новый файл - .env.development.local и .env.production.local соответственно.

EDIT: Я должен указать, что переменные среды, которые вы установили, должны начинаться с "REACT_APP_", например. "REACT_APP_MY_ENV_VALUE".

EDIT 2: если вам нужно больше, чем просто разработка и производство, используйте env-cmd, как указано в этом комментарии.

Ответ 3

Если вы хотите иметь отдельные файлы dotenv для сборки и/или развертывания в разных средах (stage, prod), тогда вы можете использовать env-cmd следующим образом:

npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build

Затем просто обновите ваш package.json соответственно:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:stage": "env-cmd -f ./.env.stage npm run-script build"
  },

Затем, чтобы построить, вы просто запустите эту команду оболочки:

npm run build:stage