CODEWITHSUNDEEP
javascriptdependencieswebpack
François Richard
François Richard

Reputation: 7055

webpack, how to manage dependencies

I have a module called gridstack which use the following things:

(function(factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery', 'lodash', 'jquery-ui/core', 'jquery-ui/widget', 'jquery-ui/mouse', 'jquery-ui/draggable',
            'jquery-ui/resizable'], factory);
    }

But it can't resolve the jquery-ui dependencies, how to manage that in webpack ?

If I don't use webpack I would do that: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"> </script>
<script type="text/javascript" src="gridstack.js/dist/gridstack.js"> </script>

Upvotes: 0

Views: 682

Answers (2)

Rick
Rick

Reputation: 1209

To solve this problem using webpack and npm, do the following:

Install packages using npm

npm install jquery-ui lodash gridstack --save-dev

Create an alias in webpack.config.js

alias: {
            "lodash": "node_modules/lodash",
            "jquery-ui": "node_modules/jquery-ui",
            "gridstack": "node_modules/gridstack"
        }

Require the modules in your javascript/typescript/whatever file

require('lodash');
require('jquery-ui');
require('gridstack');

In order for webpack to recognize which files to include in your bundle, you have to require them. The alias in your config file makes sure that webpack knows where to actually find the files you're trying to include. Including the .js files in your html file does not work, especially when you're trying to combine both methods (including in html and including through webpack). This is because they can't reference to eachother when they have dependencies.

Upvotes: 1

Ted Fitzpatrick
Ted Fitzpatrick

Reputation: 944

In my research, I have seen that the require('somefile.js') js function is used to add a dependency that webpack will resolve.

Upvotes: 1

Related Questions