Webpack synchronous request

Question

I use webpack and I use require to download some packages. I have two packages: package1.js and package2.js. package1.js just creates an object with some properties called pkg1 . package2 is a javascript file containing a self-executing function that extends package1. For instance.

package2.js:

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

I am trying to set both of these parameters in a new script as follows:

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

When I do this, I get an error message:

 Uncaught TypeError: pkg1.newFunction is not a function 

I think this is due to the asynchronous loading of Javascripts: require(package2) executed before require('package1') . My evidence for this is that when I do the following, I do not receive an error message:

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

However, this is very dirty, and I would like to use require. How will I do this work?

Edit: case studies

poster-list-d3 starts with:

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

Therefore, at least as far as I understand, the inclusion of require(leaflet-d3-plugin) should make this script execute and extend the L that is introduced by require('leaflet')

Similarly, d3-hexbin-v0 starts with:

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

Again, as I read this, this script just adds the .hexbin method to d3 .

Now, if I were just writing html, I would just put these different things in different script tags, and this just works:

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

or

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

But since I use webpack, I should just be able to require and / or import these libraries after I installed them with npm or just copied the .js in these scripts to some directory and then require them from this place . Unfortunately, this does not seem to work unless I copy .js into these modules directly into all the script I am writing. This is what I am trying to avoid.

eg.

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

leads to:

 Uncaught TypeError: d3.hexbin is not a function 

Answer 1

Webpack downloads it synchronously, but each file has its own area.

That is why in your statement

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

your second does not find the d3 variable.

You can solve this problem using ProvidePlugin :

webpack.config.js

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

This d3 method will be available throughout the application.

An alternative way to achieve this is to use the following:

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

Hope this helps you!