webpack을 사용하여 React 애플리케이션에서 비동기 적으로 모듈을 요구하는 방법은 무엇입니까? 반작용 응용 프로그램에서

Question

, 나는 단지 특정 경로/경로을 flowtime.js 라는 라이브러리를 가져올하고 좀 더 코드를 실행합니다. 이 라이브러리에는 Brav1toolbox이라는 종속성이 있습니다. 어느 쪽도 npm에서 사용할 수 없습니다.

내 전략은 구성 요소의 componentDidMount 방법에 웹팩의 require를 사용하는 것입니다. 여기에 내 시도가있다 :

componentDidMount() { 
    require.ensure([ 'local/relative/path/to/lib/brav1toolbox.js'], function(require) { 
    var f = require('local/relative/path/to/other/lib/Flowtime.js/js/flowtime.js'); 
    }); 
} 

그 결과는 다음과 같은 오류가 발생합니다.

Uncaught (in promise) ReferenceError: Brav1Toolbox is not defined

그래서 Flowtime이로드되고 있지만 Brav1Toolbox를 찾을 수 없습니다.

내가 반응하거나 웹팩 그래서 아마도 내가 오해를하거나 경험하고 있지 않다. 내 사용자가 해당 라이브러리가 필요한 경로를 방문하는 경우에만 해당 라이브러리를로드 할 webpack 사용하려고합니다. This is the webpack guide 참조로 사용했습니다.

도와 주셔서 감사.

Answer 1

그것은 웹팩의 버전에 따라 달라집니다,하지만 당신은 코드 분할/경로 청크와 올바른 궤도에 있습니다.

는 웹팩 v2의 나는 Webpack documentation을 확인하는 것이 좋습니다.

webpack 2를 사용하면 필요한 곳에 반응 컨테이너/구성 요소 내의 라이브러리를 요구 한 다음 경로를 기반으로 코드를 동적으로로드 할 수 있습니다. 예를 들어 두 개의 경로 예를 통해 반응 라우터에서이 작업을 수행 할 수 있습니다. "/ home"과 "/ about"은 다음과 같습니다 :

<Route path="/home" getComponent={(nextState, callback) => { 
    require.ensure([], require => { 
     callback(null, require("./containers/home")); 
    }, "Home"); 
}} /> 
<Route path="/about" getComponent={(nextState, callback) => { 
    require.ensure([], require => { 
     callback(null, require("./containers/about")); 
    }, "About"); 
}} />