Ich habe eine React + Flux-App und verwende Webpack. Die REST-API, die ich verwende, wird von einem anderen Server bereitgestellt, und ich versuche herauszufinden, wo ich die Backend-Endpunktkonstante angeben kann, je nachdem, ob ich mich in einer Entwicklungs- oder einer Produktumgebung befinde.

Derzeit habe ich für dev die URL als localhost: port harcodiert, aber bei der Bereitstellung wird weiterhin versucht, auf die Endpunkte bei localhost zuzugreifen.

Es scheint, als sollte es etwas ziemlich Häufiges sein, kann aber keine Informationen finden.

2
eltuza 28 Dez. 2015 im 22:24

2 Antworten

Beste Antwort

Sie können Ihren Webpack-Skripten Umgebungsvariablen hinzufügen. Eine gängige Praxis für Knoten ist die Verwendung von ENV = Produktion || dev, wenn Sie das Webpack-Skript in bash oder in package.json verwenden. Als nächstes können Sie zwei verschiedene Konfigurationsdateien erstellen, eine für die Produktion und eine für die Entwicklung.

plugins: [
    new webpack.DefinePlugin({
        ENV: process.ENV === 'dev' ? require('./dev-config-path')) : require('./prod-config-path')
    })
]

ENV sollte jetzt an das Fensterobjekt angehängt werden. Stellen Sie sicher, dass Sie keine API-Schlüssel oder ähnliches hinzufügen, da darauf zugegriffen werden kann. Sie können die API-URL auch einfach fest codieren.

plugins: [
    new webpack.DefinePlugin({
        API: process.ENV === 'dev' ? 'localhost:3000' : 'xxx.xxx.x.x'
    })
]
6
Andrew Axton 28 Dez. 2015 im 19:51

Ich finde es einfacher, die Eigenschaft externals von webpack für webpack.config.js zu verwenden. Das machen Sie:

In webpack.config.js

    ...
    externals: {
      config: JSON.stringify(production ? require('./config.prod.json') : require('./config.dev.json'))
    }
    ...

Auf diese Weise können Sie separate Dateien für verschiedene Umgebungen erstellen, in denen ALLE benötigten Konfigurationsvariablen aufgelistet sind. Außerdem könnten Sie webpack.config.dev.js und webpack.config.prod.js haben und dort denselben externals Schlüssel angeben und die ternäre Prüfung überspringen.

Schließlich greifen Sie im Code als CommonJS-Modul darauf zu - var config = require('config')

0
vjrngn 20 Mai 2017 im 09:13