JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 13919
  • Score
    100M100P100Q133437F
  • License MIT

Install jquery-ui and all necessary webpack loaders ready to use

Package Exports

  • webpack-jquery-ui
  • webpack-jquery-ui/css
  • webpack-jquery-ui/dialog
  • webpack-jquery-ui/draggable
  • webpack-jquery-ui/droppable
  • webpack-jquery-ui/effects
  • webpack-jquery-ui/resizable
  • webpack-jquery-ui/selectable
  • webpack-jquery-ui/slider
  • webpack-jquery-ui/sortable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webpack-jquery-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Installation

This one package will let you use jquery and jquery-ui (v.1.12.1, for jQuery1.7+) in your project. Use npm install webpack-jquery-ui instead of installing all dependencies and loaders separately.

The following dependencies will be installed:

Package name
jquery
jquery-ui
css-loader
style-loader
file-loader
webpack

Configuration

1. Require the path module in your webpack.config.js file
var path = require('path');

module.exports = {
  //webpack config
}
2. Set output folders for images used by jquery-ui

The example of folders arrangement:

    output:{
        path: path.join(__dirname,'public/assets/'),
        publicPath:'assets/'
    },
3. Set globals

Use the ProvidePlugin constructor in the plugins object of webpack.config.js file to inject jquery implicit globals:

plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery'",
      "window.$": "jquery"
  })
]
4. Set loaders

Add the loaders to your webpack.config.js file to support jquery-ui

module: {
  rules: [
    {
      test: /\.(jpe?g|png|gif)$/i,
      loader:"file-loader",
      query:{
        name:'[name].[ext]',
        outputPath:'images/'
        //the images will be emmited to public/assets/images/ folder
        //the images will be put in the DOM <style> tag as eg. background: url(assets/images/image.png);
      }
    },
    {
      test: /\.css$/,
      loaders: ["style-loader","css-loader"]
    }
  ]
}

Usage

To load all jquery-ui features with its basic css theme use:

require('webpack-jquery-ui');
require('webpack-jquery-ui/css');  //ommit, if you don't want to load basic css theme

To load only jquery-ui interactions or widgets or effects [list of features] use:

don't worry about jquery-ui core files. All neccessary dependencies are automatically loaded

require('webpack-jquery-ui/interactions');
require('webpack-jquery-ui/widgets');
require('webpack-jquery-ui/effects');

To load only particular interactions [list of interactions] use:

don't worry about jquery-ui core files. All neccessary dependencies are automatically loaded with chosen interaction feature

require('webpack-jquery-ui/draggable');
require('webpack-jquery-ui/droppable');
require('webpack-jquery-ui/resizable');
require('webpack-jquery-ui/selectable');
require('webpack-jquery-ui/sortable');

To load only particular widgets [list of widgets] use:

don't worry about jquery-ui core files. All neccessary dependencies are automatically loaded with chosen widget

require('webpack-jquery-ui/accordion');
require('webpack-jquery-ui/autocomplete');
require('webpack-jquery-ui/button');
require('webpack-jquery-ui/checkboxradio');
require('webpack-jquery-ui/controlgroup');
require('webpack-jquery-ui/datepicker');
require('webpack-jquery-ui/dialog');
require('webpack-jquery-ui/menu');
require('webpack-jquery-ui/progressbar');
require('webpack-jquery-ui/selectmenu');
require('webpack-jquery-ui/slider');
require('webpack-jquery-ui/spinner');
require('webpack-jquery-ui/tabs');
require('webpack-jquery-ui/tooltip');

To load only particular effects [list of effects] use:

don't worry about jquery-ui core files. All neccessary dependencies are automatically loaded with chosen effect

require('webpack-jquery-ui/blind-effect');
require('webpack-jquery-ui/bounce-effect');
require('webpack-jquery-ui/clip-effect');
require('webpack-jquery-ui/drop-effect');
require('webpack-jquery-ui/explode-effect');
require('webpack-jquery-ui/fade-effect');
require('webpack-jquery-ui/fold-effect');
require('webpack-jquery-ui/highlight-effect');
require('webpack-jquery-ui/puff-effect');
require('webpack-jquery-ui/pulsate-effect');
require('webpack-jquery-ui/scale-effect');
require('webpack-jquery-ui/shake-effect');
require('webpack-jquery-ui/size-effect');
require('webpack-jquery-ui/slide-effect');
require('webpack-jquery-ui/transfer-effect');

You can also set the entry property in the webpack.config.js file:

entry: [
    "webpack-jquery-ui",
    //"webpack-jquery-ui/accordion";
    //"webpack-jquery-ui/widgets";
    //etc.
    "your-entry-point"
]

See also