Wie setze ich Build-ENV-Variablen, wenn ich ein Build-React-App-Build-Skript ausführe?

Ich verwende die folgende Umgebungsvariable in meiner Create-React-App:

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

Es funktioniert, wenn ich npm starteine .envDatei lese :

REACT_APP_API_URL=http://localhost:5555

Wie setze ich einen anderen Wert wie http://localhost:1234beim Ausführen von a npm run build?

Das ist meine package.jsonDatei:

{
  "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"
  }
}

Sie können Folgendes verwenden 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;

Sie müssten haben REACT_APP_PROD_API_URLund REACT_APP_DEV_API_URLeinstellen.

Wenn die Produktions-URL immer dieselbe ist, können Sie sie vereinfachen:

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

Die App "React erstellen" setzt die Option NODE_ENV"Produktion" für Sie beim Erstellen, sodass Sie sich keine Gedanken darüber machen müssen, wann sie auf "Produktion" eingestellt werden soll.

Hinweis: Sie müssen Ihren Server neu starten (z. B. npm starterneut ausführen ), um Änderungen an Umgebungsvariablen zu erkennen.

Ich kann mir vorstellen, dass dies inzwischen funktioniert, aber für alle anderen, die dies finden, legen Sie Ihre Standardumgebungsvariablen in a fest .env Datei im Stammverzeichnis Ihres Projekts "create-react-app" fest.

Abzuscheiden verwendet , um die Variablen bei der Verwendung npm startund npm run buildSie können zwei weitere env - Dateien erstellen - .env.developmentund.env.production .

npm startgesetzt wird REACT_APP_NODE_ENVzu development, und so automatisch die verwenden .env.developmentDatei und npm run buildsetzt REACT_APP_NODE_ENVan production, und so ist es automatisch verwendet wird .env.production. Die hier festgelegten Werte überschreiben die Werte in Ihrem.env .

Wenn Sie mit anderen Personen arbeiten und nur für Ihren Computer spezifische Werte haben, können Sie Werte in .env.developmentund .env.productiondurch Hinzufügen dieser Werte zu einer neuen Datei überschreiben - .env.development.localund.env.production.local sind.

BEARBEITEN: Ich möchte darauf hinweisen, dass die von Ihnen festgelegten Umgebungsvariablen mit "REACT_APP_" beginnen müssen, z. "REACT_APP_MY_ENV_VALUE".

BEARBEITEN 2: Wenn Sie mehr als nur Entwicklung und Produktion benötigen, verwenden Sie env-cmd , wie in diesem Kommentar angegeben .

Wenn Sie separate dotenv-Dateien zum Erstellen und / oder Bereitstellen in separaten Umgebungen (Stage, Prod) haben möchten, können Sie env-cmd wie folgt verwenden :

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

Dann aktualisieren Sie einfach Ihre package.jsonentsprechend:

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

Zum Erstellen führen Sie dann einfach diesen Shell-Befehl aus:

npm run build:stage

Installieren Sie das Paket 'env-cmd'

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "start:qa": "env-cmd -f .env.qa react-scripts start",
    "build:qa": "env-cmd -f .env.qa react-scripts build"
  },

in local, wenn wir eine qa-Umgebung ausführen möchten, verwenden Sie npm run start: qa