使 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.

另一个奇怪的时刻:如果我像这样用窗口"替换这个":

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 installimports-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 一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！