I was trying to load jquery-mobile with webpack. But no luck so far.
This is my webpack.config code for jquery & jquery-mobile:
loaders: [
{
test: /jquery.mobile.js$/,
loader: "imports?define=>false,this=>window"
},
resolve: {
alias: {
"jquery": "jquery/src/jquery",
"jquery-mobile": "jquery-mobile/dist/jquery.mobile"
},
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
]
And this is the function in jquery.mobile file which causes trouble:
(function ( root, doc, factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define( [ "jquery" ], function ( $ ) {
factory( $, root, doc );
return $.mobile;
});
} else {
// Browser globals
factory( root.jQuery, root, doc );
}
}( this, document, function ( jQuery, window, document, undefined ) {
(function( $ ) {
$.mobile = {};
}( jQuery ));
The problem is that root.jQuery is undefined. Inside that function "this" === "window", as i inject this=>window with imports-loader, i checked that.
And another strange moment: if i replace "this" with "window" like that:
}( window, document, function ( jQuery, window, document, undefined ) {
everything becomes fine. But i can't modify jquery.mobile file, this might cause trouble in the future.
Any help would be much appreciated, thank you!
The following requires the imports-loader (npm install imports-loader --save
)
jQuery mobile expects this
to be the global context (window
):
require("imports?this=>window!jquery-mobile/dist/jquery.mobile.js");
Reference: https://webpack.github.io/docs/shimming-modules.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With