Webpack: How to tame non npm compliant js library

Question

I have js libraries that initialize themselves like the following:

(function(root) {
   ......
   ......
})(this)

when built with webpack, I get something like

function(module, exports) {
   (function(root) {

    })(this)
}

The "this" is not window as the libraries would assume. Is there a neat way to tame this type of library to work with webpack? My last resort would be hackly replace the this with window using postloader or something.

Answer 1

Yes, we call these 'broken modules' because like you said they simply execute in the global context there are a few different methods to shim these kind of modules.

Here is a list of different options (as the solution cam vary per library). I like using the ProvidePlugin or using alias and externals.