使jQuery-Mobile与webpack一起使用

问题描述

我试图用webpack加载jquery-mobile.但是到目前为止还没有运气.

I was trying to load jquery-mobile with webpack. But no luck so far.

这是我用于jquery&的webpack.config代码jquery-mobile:

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"
    }),
]

这是jquery.mobile文件中的函数，会引起麻烦:

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 ));

问题在于root.jQuery是未定义的.在该函数"this" ==="window"内，当我使用imports-loader注入this => window时，我检查了这一点.

The problem is that root.jQuery is undefined. Inside that function "this" === "window", as i inject this=>window with imports-loader, i checked that.

另一个奇怪的时刻:如果我将"this"替换为"window"，则这样:

And another strange moment: if i replace "this" with "window" like that:

}( window, document, function ( jQuery, window, document, undefined ) {

一切都变好了.但是我无法修改jquery.mobile文件，这将来可能会引起麻烦.

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!

推荐答案

以下内容需要imports-loader(npm install imports-loader --save)

The following requires the imports-loader (npm install imports-loader --save)

jQuery mobile希望this是全局上下文(window):

jQuery mobile expects this to be the global context (window):

require("imports?this=>window!jquery-mobile/dist/jquery.mobile.js");

参考: https://webpack.github.io /docs/shimming-modules.html

这篇关于使jQuery-Mobile与webpack一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！