Hinzufügen von Konfiguration zu Webpack-basierten SPA

Question

Ich schreibe SPA mit Vue.js und Webpack 2. Das Node-Ökosystem ist ziemlich neue Erfahrung für mich.

Ich muss einige Konfigurationsvariablen setzen können, vorzugsweise dynamisch aufgelöst. In meinen Augen würde die Lösung eine Konfigurationsdatei beinhalten, die immer dann abgerufen wird, wenn eine Anwendung geladen wird. Das Problem sieht ziemlich generisch aus, aber ich habe es nicht geschafft, etwas Ähnliches zu googeln.

Gibt es dafür eine "Standard" -Lösung in der Webpack-Welt oder zumindest bewährte Praktiken?

Answer 1

Angenommen, Sie speichern Ihre Konfigurationsvariablen in einer JSON-Datei, config.json.

{ 
    "some": "123", 
    "configs": "456", 
    "here": "789" 
} 

Erfordern Sie Ihre Konfigurationsdatei mit Datei-Loader in Ihrer Anwendung. https://github.com/webpack-contrib/file-loader

// Require config file 
// File-loader returns the public URL for your file required here 
var configURL = require("file-loader!./config.json"); 

Laden Sie Ihre config.json mit einem einfachen XHR, bevor Sie Ihre Vue Anwendung initialisieren.

// Create XHR 
var configXHR = new XMLHttpRequest(); 
configXHR.open("GET", configURL, false); // Synchronous request 
configXHR.send(); 

// Response status check 
if(configXHR.status == 200) { 
    var configs = JSON.parse(configXHR.responseText); 
    console.log(configs); 
} else { 
    throw "Unable to load config file"; 
} 

// Bootstrap your Vue application below 
// ... 

Answer 2

vorzugsweise dynamisch auf HMR aufgelöst

Eine einfache Lösung verlassen können, die Last erlaubt und dynamisch importierte Ressource aktualisieren. Und mehr, Webpack + HMR wird automatisch Datei auf dem Server beobachten und Updates auf dem Client veröffentlichen, wenn es passiert ist.

Genre classic - https://webpack.js.org/concepts/hot-module-replacement/

import config from 'APP_CONFIG'; 
// Some code ... 
if(module.hot) { 
    module.hot.accept('APP_CONFIG',() => { 
    // Reaction to changes... 
    } 
}