jquery-ui and webpack, how to manage it into module?

Question

any idea how to deal with that ? I mean jquery-ui seems not to be amd and I don't know how to manage that , any idea ?

Answer 1

jquery-ui-dist and jquery-ui-bundle do not seem to be maintained by the jquery-ui team. After jquery-ui v1.12 Its possible to use the official jquery-ui package from npm with webpack.

Update jquery-ui to 1.12 by updating package.json and npm install.

Then you can require each widget like this.

require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/draggable");

If you have used require("jquery-ui") before you need to replace it with separate imports for each widget. I think the new way is better because it will bundle only the code for the widget we need to use.

See documentation on using the 1.12 official npm package.

Answer 2

For some reason jquery-ui didn't play nice with webpack. I had to require jquery-ui-bundle instead.

npm i -S jquery-ui-bundle

and then require it after jquery e.g.

require('jquery');
require('jquery-ui-bundle');

Answer 3

youre in luck I did this just that yesterday, it's rather easy.

npm install --save jquery jquery-ui

Make sure that you have jquery aliased to resolve with the plugin in the webpack.config.js

...
plugins: [
    new webpack.ProvidePlugin({
      "$":"jquery",
      "jQuery":"jquery",
      "window.jQuery":"jquery"
    }),
...

Then include two aliases in the webpack.config.js

1. The node_modules folder
2. The jquery-ui folder

``````

resolve : {
    alias: {
      // bind version of jquery-ui
      "jquery-ui": "jquery-ui/jquery-ui.js",      
      // bind to modules;
      modules: path.join(__dirname, "node_modules"),

Make sure that jquery gets loaded first in your app startup file.

var $ = require("jquery"),
        require("jquery-ui");

If you need to use a theme configure the css-loader and the file-loader. Don't forget to npm install those loaders.

module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      { test: /\.(jpe?g|png|gif)$/i, loader:"file" },

And use in your app startup file.

require("modules/jquery-ui/themes/black-tie/jquery-ui.css");
require("modules/jquery-ui/themes/black-tie/jquery-ui.theme.css");