Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
webpack-jquery-ui
Advanced tools
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 |
path
module in your webpack.config.js
filevar path = require('path');
module.exports = {
//webpack config
}
The example of folders arrangement:
output:{
path: path.join(__dirname,'public/assets/'),
publicPath:'assets/'
},
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"
})
]
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"]
}
]
}
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"
]
FAQs
Install jquery-ui and all necessary webpack loaders ready to use
We found that webpack-jquery-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.