wake-up-neo.com

Wie setze ich Build-ENV-Variablen, wenn ich ein Build-Skript für eine Create-Reactive-App 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 start durch Lesen eines .env Datei:

REACT_APP_API_URL=http://localhost:5555

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

Das ist mein package.json Datei:

{
  "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"
  }
}
reactjswebpackfrontendcreate-react-appreact-scripts
47
sigmus

Sie können den process.env.NODE_ENV Wie folgt verwenden:

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

Sie müssten REACT_APP_PROD_API_URL Und REACT_APP_DEV_API_URL Einstellen.

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;

Erstellen React App setzt den NODE_ENV Für Sie beim Erstellen auf 'Produktion', sodass Sie sich keine Gedanken machen müssen, wann die Produktion eingestellt werden soll.

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

38
Andy_D

Ich stelle mir vor, Sie haben dies inzwischen zum Laufen gebracht, aber für alle anderen, die dies finden, legen Sie Ihre Standard-Umgebungsvariablen in einer .env - Datei im Stammverzeichnis Ihres Projekts "create-react-app" fest.

Um die bei Verwendung von npm start Und npm run build Verwendeten Variablen zu trennen, können Sie zwei weitere env-Dateien erstellen - .env.development Und .env.production.

npm start Setzt REACT_APP_NODE_ENV Auf development und verwendet daher automatisch die Datei .env.development, Und npm run build Setzt REACT_APP_NODE_ENV zu production, und so wird automatisch .env.production verwendet. Die hier eingestellten Werte überschreiben die Werte in Ihrem .env.

Wenn Sie mit anderen Personen zusammenarbeiten und Werte haben, die nur für Ihren Computer gelten, können Sie die Werte in .env.development Und .env.production Überschreiben, indem Sie diese Werte zu einer neuen Datei hinzufügen - .env.development.local und .env.production.local.

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

EDIT 2: Wenn Sie mehr als nur Entwicklung und Produktion benötigen, verwenden Sie env-cmd , wie von = angegeben dieser Kommentar .

95
Baldeep

Wenn Sie separate Dotenv-Dateien zum Erstellen und/oder Bereitstellen in separaten Umgebungen (Stage, Prod) benötigen, 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 aktualisiere einfach dein package.json entsprechend:

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

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

npm run build:stage
7
chrishiestand