동기식 Webpack에서 필요합니다.

Question

webpack을 사용 중이며 일부 패키지를 가져 오기 위해 require를 사용하고 있습니다. 패키지가 두 개 있습니다 : package1.js와 package2.js. package1.js는 pkg1이라는 몇 가지 속성으로 객체를 만듭니다. package2는 package1을 확장하는 자체 실행 함수가 들어있는 javascript 파일입니다. 예 :

package2.js : 나는이 작업을 수행 할 때

require('package1') 
require('package2') 

, 나는 오류가 발생 :

!function() { 
    pkg1.prototype.newFunction = function {return "foo"}; 
}() 

나는 다음과 같은 방법으로 새 ​​스크립트로이 두 가지를 요구하기 위해 노력하고있어 :

Uncaught TypeError: pkg1.newFunction is not a function 

나는이 때문에 Javascript를 비동기로드의 생각 : require(package2)는 01,231하기 전에 실행. 이에 대한 나의 증거는 다음과 같은 처리를 할 때 오류 얻을 수 없다는 것입니다 :

require('package1') 
!function() { 
    pkg1.prototype.newFunction = function {return "foo"}; 
}() 

그러나,이 매우 지저분를, 내가 필요로 사용하고 싶습니다. 어떻게하면이 일을 할 수 있을까요?

편집합니다 require(leaflet-d3-plugin)에서 퍼팅이 스크립트가 실행하고 데려 L을 확장하게한다, 적어도 나의 이해에 따라서

(function() { 
    L.HexbinLayer = L.Class.extend({ 
    ... 
})() 

: 구체적인 예는

leaflet-d3 plugin로 시작 in require('leaflet')

마찬가지로 d3-hexbin-v0은 다음으로 시작합니다.

!function(){d3.hexbin=function(){ 
    ... 
}}() 

다시 읽는 방법은이 스크립트가 에 .hexbin 메서드를 추가하는 것입니다. 웹팩

<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://d3js.org/d3.hexbin.v0.min.js"></script> 

또는

<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> 
<script src="static/leaflet-d3.min.js" charset="utf-8"></script> 

를하지만 사용하고 이후 : 난 그냥 HTML을 작성한다면, 난 그냥 다양한 스크립트 태그에 서로 다른 일을 둘 것이 바로 작동 이제

, 나는 npm으로 설치 한 후에이 라이브러리를 요구하거나 가져올 수 있어야한다. 또는이 스크립트의 .js를 일부 디렉토리에 복사 한 다음 그 위치에서 require을 복사하면된다. 불행하게도이 모듈의 .js를 내가 쓰고있는 스크립트에 직접 복사하지 않으면 작동하지 않는 것 같습니다. 이것이 내가 피하려고하는 것입니다.

예. 에서

import * as d3 from 'd3'; \\I'm using d3 v4 here. 
require('/resources/d3-hexbin.min.js') 

결과 :

Uncaught TypeError: d3.hexbin is not a function 

Answer 1

웹팩 loades는 동기하지만 각 파일에 고유 한 범위를 가지고있다.명세서에

import * as d3 from 'd3'; \\I'm using d3 v4 here. 
require('/resources/d3-hexbin.min.js') 

두 번째는 d3 변수를 찾을 수없는 이유

.

당신은 ProvidePlugin를 사용하여 해결할 수 :

는

plugins: [ 
    new webpack.ProvidePlugin({ 
    d3: 'd3' 
    }), 
    ... //other plugins 

응용 프로그램 전체에서 사용할 수 있습니다이 방법 d3을 webpack.config.js.

을 달성하기위한 다른 방법은 다음을 사용하는 것입니다

import * as d3 from 'd3'; 
window.d3 = d3; 
require('./d3.hexbin.v0.min.js') 

은 당신이 도움이되기를 바랍니다!