Wie kann ich eine Konfigurationsdatei in React verwenden?

Question

Nehmen wir an, ich habe 5 jsx-Dateien und jede Datei verwendet einige Config-Parameter. Meine index.js-Datei importiert alle diese 5 JSX-Dateien.

Anstatt meine Konfigurationsdaten über 5 Dateien zu verteilen, gibt es eine Möglichkeit für meine jsx-Dateien, die Daten von einem globalen JS-Objekt zu bekommen, das die Daten aus einer Konfigurationsdatei geladen hat?

Ich habe einige Beispiele gesehen, aber ich konnte sie nicht zur Arbeit bringen.
JS6 import function | Example using webpack

Answer 1

Unter der Annahme, ES6:

config.js 

export const myConfig = { importantData: '', apiUrl: '', ... }; 

Dann:

jsxFileOne.js, jsxFileTwo.js, ... 

import { myConfig } from 'config.js'; 

Es gibt andere Möglichkeiten & Export Dinge global nutzen webpack zu importieren, aber das sollte Ihnen den Einstieg.

Answer 2

Wenn Ihr Projekt mit Webpack erstellt wird, sollten Sie die Verwendung von node-env-file in Erwägung ziehen.
Beispiel Konfigurationsdatei Schnipsel:

development.env
API_SERVER_URL=https://www.your-server.com

webpack.config.js

const envFile = require('node-env-file'); 
... 
const appSettingsFile = isDevBuild ? '/settings/development.env' : '/settings/production.env'; 

try { 
    envFile(path.join(__dirname + appSettingsFile)); 
} catch (error) { 
    console.log("Failed to read env file!: " + __dirname + appSettingsFile); 
} 
... 
plugins: [ 
    new webpack.DefinePlugin({ 
     "process.env": { 
      API_SERVER_URL: JSON.stringify(process.env.API_SERVER_URL) 
     } 
    }) 
    ... 
] 

In Ihrem js/jsx Code können Sie nun Zugriff auf process.env.API_SERVER_URL Variable denen enthält den erforderlichen Wert.

Es scheint dotenv Paket ist beliebter, Sie können dies auch ausprobieren.