Search code examples
javascriptwebpackbundle

Webpack load legacy code

I'm a Webpack beginner who is trying to refactor an old JavaScript/jQuery application by decomposing it in several ES6 module usign Webpack and Babel.

So far i've managed to refactor the core components of the application, but now i'm stucked with a module that requires jQuery (v2.2) and another library ( BIMsurfer @V1) available on the global scope.

The problem is that the BIMsurfer library isn't designed as a module and uses Grunt to produce a minified file.

I've seen that i could use the webpack.ProvidePlugin but i'm getting this error:

TypeError: $.extend is not a function [bimsurfer.js:14]

I've created a GitHub repo with the minimal code to reproduce the error.

My goal is to produce a single bundle with my JavaScript library that can be re-used in several application.

Solution

  • Downloaded your repo and did some test. The webpack config is fine. But there are other problems you need to fix.

    1. the src/libs/jquery.js file is empty.
    2. in the src/libs/bimsurfer/bimsurfer.js file, at line 15015 and 22438, the declaration of WebGLDebugUtils and SceneJS_PubSubProxy are missing the var keyword.

    once you fix these two problem, you should be able to see a clean console in chrome devtool.