Synchron in Webpack erforderlich

Question

Ich benutze Webpack und ich brauche, um einige Pakete zu ziehen. Ich habe zwei Pakete: package1.js und package2.js. package1.js erstellt einfach ein Objekt mit einigen Eigenschaften namens pkg1. package2 ist eine JavaScript-Datei, die eine selbstausführende Funktion enthält, die package1 erweitert. Z.B.

package2.js:

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

Ich versuche, auf die folgende Weise diese beiden in ein neues Skript zu verlangen:

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

Wenn ich das tue, erhalte ich eine Fehlermeldung:

Uncaught TypeError: pkg1.newFunction is not a function 

ich denke, das wegen Javascripts asynchronen Ladens ist: require(package2) vorausführt. Mein Beweis dafür ist, dass wenn ich den folgenden ich nicht einen Fehler:

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

Dies ist jedoch sehr chaotisch ist, und ich möchte erfordern verwenden. Wie würde ich diese Arbeit machen?

Edit: Spezifische Beispiele

Die leaflet-d3 plugin beginnen mit:

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

daher zumindest nach meinem Verständnis, sollte dieses Skript in einem require(leaflet-d3-plugin) setzen verursacht L auszuführen und zu erweitern, die gebracht wird, in von require('leaflet')

Ebenso beginnt d3-hexbin-v0 mit:

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

Auch die Art, wie ich diese Zeilen lesen ist, dass dieses Skript einfach eine .hexbin Methode d3 hinzufügt.

Nun, wenn ich nur HTML zu schreiben, würde ich diese verschiedenen Dinge in verschiedenen Script-Tags setzen Sie einfach und das funktioniert nur:

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

oder

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

Aber da ich verwende webpack , Ich sollte nur in der Lage sein, diese Bibliotheken zu benötigen und/oder zu importieren, nachdem ich sie mit npm installiert habe oder wenn ich einfach die .js in diese Skripte in ein Verzeichnis und dann require von diesem Ort kopiere. Leider scheint dies nicht zu funktionieren, wenn ich die .js in diesen Modulen nicht direkt in das Skript schreibe, das ich schreibe. Das versuche ich zu vermeiden.

z.

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

Ergebnisse in:

Uncaught TypeError: d3.hexbin is not a function 

Answer 1

Webpack Loades es synchron, aber jede Datei haben einen eigenen Anwendungsbereich.

Die warum in Ihrer Aussage ist

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

Ihr zweite nicht d3 Variable nicht finden.

Sie können es lösen, indem ProvidePlugin mit:

webpack.config.js

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

Auf diese Weise d3 wird während der Anwendung zur Verfügung stehen.

Alternative Weg, es zu erreichen, ist die folgende verwenden:

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

Hoffe, dass es Ihnen hilft!