번들링하지 않고 Webpack-React 응용 프로그램에서 외부 구성 파일을로드하는 방법은 무엇입니까?

React로 작성되고 Webpack에 번들로 제공되는 웹 응용 프로그램이 있습니다. 응용 프로그램에는 런타임에 포함시키고 webpack에 번들되지 않도록하려는 JSON 구성 파일이 있습니다.번들링하지 않고 Webpack-React 응용 프로그램에서 외부 구성 파일을로드하는 방법은 무엇입니까?

응용 프로그램의 시작점에서 json-loader를 사용하여 내용을 가져오고 있지만 해당 응용 프로그램에 파일이 포함되어 강제로 번들되면 구성 파일을 업데이트 할 수 없습니다.

config.json 파일을 제외하고 내 응용 프로그램에서 가져올 수 있도록 webpack.config.js 파일을 구성하려면 어떻게해야합니까? 그것은 모듈이 아니기 때문에 내 webpack.config.js의 externals 섹션에 포함될 수 있는지 모르겠습니다.

require.ensure를 사용해 보았습니다 만, 이제 config.json의 내용이 번들로 제공됩니다. 1.1.bundle.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

을 app.js, 당신은

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

그리고 당신의

가

로 설정 얻을 응용 프로그램 반응하여 index.html을이 작업을 수행 할 수

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

출처

2016-10-16 18:34:26 Doppio

번들링하지 않고 Webpack-React 응용 프로그램에서 외부 구성 파일을로드하는 방법은 무엇입니까?

답변

관련 문제