Wie kann ich externe Konfigurationseinstellungen in einer React JS App dynamisch laden?

Question

Ich verwende derzeit Webpack, um die Konfiguration für meine React JS-App zu verwalten.

Ich habe eine config.development.json Datei, die von meiner Entwicklung Build-Skript geladen wird. Es enthält

{ 
    "primary1Color": "pink" 
} 

es im Webpack Skript geladen wird als

externals: { 
    configuration: JSON.stringify(require("./config.development.json")) 
} 

folgt Es gibt eine ähnliche Einrichtung für die Produktion aufbaut.

Referenz ich die Konfigurationsparameter in meiner app als

import configuration from "configuration"; 

const mainColor = configuration.primary1Color; 

folgt Dies alles funktioniert.

Allerdings möchte ich die Einstellungen ermöglichen, nach der Bereitstellung konfiguriert werden --- d. Lass die App die Konfigurationsdatei lesen, wenn sie ausgeführt wird. Wenn Kunden das Farbschema ändern möchten, können sie dies tun, ohne dass ich die App neu erstellen muss.

Wie kann ich die App dazu bringen, meine JSON-Konfigurationsdatei dynamisch zu laden?

Answer 1

Sie müssen es nicht bündeln mit webpack. Sie können den JSON mit normalem AJAX-Aufruf laden oder script.js verwenden.

https://github.com/ded/script.js

Allerdings, wenn Sie wirklich webpack Loader verwenden möchten, können Sie Außen-loader versuchen.

https://github.com/sheerun/external-loader

Weitere Diskussion hier: "Require external (unmanaged) file"

Answer 2

Ich denke, der beste Ansatz wäre, einen API-Endpunkt zu erstellen, auf den die Interaktion reagiert, um sie zu laden.