Jak załadować zewnętrzny plik konfiguracyjny w aplikacji Webpack-React bez łączenia w pakiet?

Mam aplikację internetową napisaną w React i dołączoną do pakietu Webpack. Aplikacja ma plik konfiguracyjny JSON, który chcę dołączyć w czasie wykonywania i nie być dołączany do pakietu internetowego.Jak załadować zewnętrzny plik konfiguracyjny w aplikacji Webpack-React bez łączenia w pakiet?

W punkcie wejścia dla aplikacji importuję zawartość za pomocą programu json-loader, ale działanie to wymusza osadzenie pliku w aplikacji i nie mogę zaktualizować pliku konfiguracyjnego po jego dołączeniu.

Jak mogę skonfigurować mój plik webpack.config.js, aby wykluczyć mój plik config.json, ale nadal mogę go zaimportować do mojej aplikacji? To nie jest moduł, więc nie wiem, czy można go włączyć do sekcji externals mojego pliku webpack.config.js

Próbowałem użyć require.ensure, ale teraz widzę zawartość config.json w pakiecie plik 1.1.bundle.js i zmiana pliku konfiguracyjnego nic nie robi.

app.js

let config; 
require.ensure(['./config.json'], require => { 
    config = require('./config.json'); 
});

Źródło

2016-07-08 Ilvenis

Możesz pobrać plik json za pośrednictwem http za pomocą funkcji fetch() lub http węzła. Czy aplikacja działa na serwerze węzła i przeglądarce? A może po prostu w przeglądarce? –

Skończyłem, używając zmodyfikowanej wersji, aby załadować mój skrypt na zewnątrz. Moja aplikacja nie wymaga natychmiastowej konfiguracji, więc aspekt asynchroniczny nie robi tutaj różnicy.

Umieściłem to na górze mojej strony <head> na stronie aplikacji z współlokatorem pliku konfiguracyjnego.

<head> 
    ... other scripts 
    <script> 
     var config= window.config|| {}; 
     $.getJSON('config.json', function(response) { 
      config= response; 
     }); 
    </script> 
</head> 
<body> 
    <div id='root'/> 
    <script src='dist/app.bundle.js'></script> 
</body>

Źródło

2016-10-19 13:26:16 Ilvenis

Jeśli config nie jest tak poufne, można to zrobić w index.html

<script> 
    var initialState = { 
    config: { 
     idleTime: 120, 
     fetchStatusInterval: 8, 
     dataPath: 'somepath.json', 
    }, 
    }; 
    window.__INITIAL_STATE__ = initialState; 
</script> 
<script src="static/bundle.js"></script>

iw swoim reagować aplikację uzyskać config z

const applicationInitialState = window.__INITIAL_STATE__; 
const config = applicationInitialState.config;

Źródło

2016-10-16 18:34:26 Doppio

Jak załadować zewnętrzny plik konfiguracyjny w aplikacji Webpack-React bez łączenia w pakiet?

Odpowiedz

Powiązane problemy