バンドルせずにWebpack-Reactアプリケーションに外部設定ファイルをロードする方法は？

私はReactで書かれ、WebpackにバンドルされたWebアプリケーションを持っています。アプリケーションには、実行時に含めるJSON設定ファイルがあり、webpackにバンドルされないようにしています。バンドルせずにWebpack-Reactアプリケーションに外部設定ファイルをロードする方法は？

アプリケーションのエントリポイントで、json-loaderを使用してコンテンツをインポートしていますが、これを実行するとアプリケーションにファイルが埋め込まれ、バンドルされてから設定ファイルを更新できなくなります。

webpack.config.jsファイルを設定してconfig.jsonファイルを除外することはできますが、アプリケーションでインポートすることはできますか？モジュールではないので、webpack.config.jsのexternalsセクションに含まれているかどうかわかりません

私はrequire.ensureを使ってみましたが、今はconfig.jsonの内容がバンドルされています1.1.bundle.jsファイルと設定ファイルの変更は何もしません。

app.js

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

出典

2016-07-08 Ilvenis

fetch（）またはノードのhttpでhttpを介してjsonファイルを取得できます。アプリケーションはノードサーバーとブラウザで実行されますか？それともブラウザの中だけ？ –

変更されたバージョンを使用して、スクリプトを外部に読み込みました。私のアプリケーションはすぐに設定を必要としないので、非同期のアスペクトでは違いはありません。

これは、アプリケーションの入力ページと同じ場所にある設定ファイルの<head>の上部に配置されています。

<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>

出典

2016-10-19 13:26:16 Ilvenis

あなたの設定は非常に機密ではない場合、あなたはindex.htmlの中でこれを行うことができます

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

そして、あなたの中には、アプリケーションが

を使用して設定を取得する反応

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

出典

2016-10-16 18:34:26 Doppio

バンドルせずにWebpack-Reactアプリケーションに外部設定ファイルをロードする方法は？

答えて

関連する問題