Question

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

这是我的jpackery＆amp;的webpack.config代码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文件中的函数，它会导致麻烦：

(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未定义。在这个功能里面＃34;这个＆＃34; ===＆＃34; window＆＃34;，当我使用imports-loader注入this =＆gt;窗口时，我检查了它。

另一个奇怪的时刻：如果我更换＆＃34;这个＆＃34;用＆＃34;窗口＆＃34;那样：

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

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

非常感谢任何帮助，谢谢！

Answer 1

以下需要imports-loader（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

使jQuery-Mobile与webpack一起工作

1 个答案: