让 jQuery-Mobile 与 webpack 一起工作答案

【问题标题】：making jQuery-Mobile work with webpack让 jQuery-Mobile 与 webpack 一起工作
【发布时间】：2016-06-09 11:58:23
【问题描述】：

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

这是我的 jquery 和 jquery-mobile 的 webpack.config 代码：

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 文件中导致问题的函数：

(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时，我检查了一下。

还有一个奇怪的时刻：如果我将“this”替换为“window”：

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

一切都变好了。但我不能修改 jquery.mobile 文件，这可能会在未来造成麻烦。

任何帮助将不胜感激，谢谢！

【问题讨论】：

你有想过这个吗？我已经尝试了所有我能找到的解决方案，但没有任何效果。我得到“无法读取未定义的属性 'userAgent'”，因为 window.navigator 未定义。
没有。可悲的是，我只需要回到 jquery-ui。

标签： jquery jquery-mobile webpack

【解决方案1】：

以下需要导入加载器 (npm install imports-loader --save)

jQuery mobile 期望 this 成为全局上下文 (window)：

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

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

【讨论】：