在Webpack中使用jQuery-mobile模块

我一直在嘲笑我的头几天，但无法找到解决方案。我有一个使用jQuery完成的cordova移动应用程序，我正在尝试使用webpack将其打包。问题是我无法在任何模块或全局中要求（'jquery-mobile'）。我尝试了很多东西。要求模块本地在Webpack中使用jQuery-mobile模块

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

导入它作为一个全球性的pluigin

plugins:[ 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     $.mobile: 'jquery-mobile' 
    }) 
    ]

我得到的错误模块未找到：错误：无法解析'jQuery的'。它仍然存在于我的节点模块中。

我的package.json有

"dependencies": { 
    "@auth0/cordova": "^0.2.0", 
    "auth0-js": "^8.8.0", 
    "cordova": "^6.5.0", 
    "cordova-android": "^6.2.3", 
    "cordova-browser": "^4.1.0", 
    "cordova-ios": "~4.4.0", 
    "cordova-plugin-customurlscheme": "^4.3.0", 
    "cordova-plugin-inappbrowser": "~1.7.1", 
    "cordova-plugin-safariviewcontroller": "^1.4.7", 
    "cordova-plugin-whitelist": "~1.3.2", 
    "grunt-cli": "^1.2.0", 
    "imports-loader": "^0.7.1", 
    "jquery": "1.9.1", 
    "jquery-mobile": "^1.4.0" 
    }, 
    "devDependencies": { 
    "cordova": "^6.5.0", 
    "babel-cli": "^6.18.0", 
    "babel-core": "^6.18.2", 
    "babel-loader": "^7.1.1", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-stage-0": "^6.16.0", 
    "expose-loader": "^0.7.3", 
    "webpack": "^3.5.2" 
    }

我已经检查了以下资源

还有很多其他的方式来使用webpack导入jquery-mobile，例如脚本加载器，但由于我对webpack的理解不够，所以在这一点上我很迷茫。

编辑1： 我webpack.config.js文件

const path = require('path'); 
const webpack = require('webpack'); 

const config = { 

    context: __dirname, 

    entry: ['babel-polyfill','./src/index.js'], 
    output: { 
    path: path.resolve(__dirname, './www'), 
    filename: 'index.js' 
    }, 
    plugins:[ 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     $.mobile:'jquery-mobile' 
    }) 
    ], 

    devtool: 'source-map', 
} 
module.exports = config;

编辑2： 所以现在我已经改变了我的package.json到jQuery的手机的最新版本，并建立了模块使用咕噜我得到的/ DIST文件夹

"dependencies": { 
     "@auth0/cordova": "^0.2.0", 
     "auth0-js": "^8.8.0", 
     "cordova": "^6.5.0", 
     "cordova-android": "^6.2.3", 
     "cordova-browser": "^4.1.0", 
     "cordova-ios": "~4.4.0", 
     "cordova-plugin-customurlscheme": "^4.3.0", 
     "cordova-plugin-inappbrowser": "~1.7.1", 
     "cordova-plugin-safariviewcontroller": "^1.4.7", 
     "cordova-plugin-whitelist": "~1.3.2", 
     "grunt-cli": "^1.2.0", 
     "imports-loader": "^0.7.1", 
     "jquery-mobile": "^1.5.0-alpha.1" 
    },

，我改变了我的webpack.config.js到

const path = require('path'); 
const webpack = require('webpack'); 

const config = { 

    context: __dirname, 

    entry: ['babel-polyfill','./src/index.js'], 
    output: { 
    path: path.resolve(__dirname, './www'), 
    filename: 'index.js' 
    }, 
    resolve: { 
    alias: { 
     "jquery": "jquery/src/jquery", 
     "jquery-mobile": "jquery-mobile/dist/jquery.mobile" 
    } 
    }, 
    plugins:[ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "window.jQuery": "jquery" 
    }), 
    new webpack.ProvidePlugin({ 
     "$.mobile": "jquery-mobile", 
     "jQuery.mobile": "jquery-mobile", 
     "window.jQuery.mobile": "jquery-mobile" 
    }) 
    ], 
    module: { 
     loaders: [ 
    { 
     test: /jquery.mobile.js$/, 
     loader: "imports-loader?define=>false,this=>window" 
    } 
    ] 
    }, 
    devtool: 'source-map', 
} 
module.exports = config;

构建成功。但是我有一段测试代码来改变使用jQuery和jQuery-mobile的页面内容，这似乎不起作用。我得到

TypeError: n.pageContainer is undefined

所以基本上$.mobile.pageContainer不被识别为一个jQuery移动物体的误差。

我的代码

module1.prototype.loadPage = function(page, options) { 
    console.log("inside LOAD PAGE"); 
    if (typeof options === "undefined") { 
    options = {showLoadMsg: false, changeHash: true}; 
    } 

    if ($("#"+page).length === 0) { 
    $.each(app.allModules, function(id, module) { 
     console.log(app.allModules); 
     if (id === page) { 
     $.mobile.pageContainer.pagecontainer("load",module.html, {role: "page"}); 
     } 
    }); 
    setTimeout(function(){ 
     $.mobile.pageContainer.pagecontainer("change", "#" + page, options); 
    }, 100); 
    } 
    else { 
    setTimeout(function() { 

     $.mobile.pageContainer.pagecontainer("change", "#" + page, options); 
    }, 0); 
    } 
}

来源

2017-10-17 Arsalan Ahmed

你能告诉我你的webpack配置文件吗？ –

hi @Rick van Osta我在问题中添加了文件。 –

当你删除* jquery-mobile *时它工作吗？你给出的错误表明找到jquery的问题，而不是jquery-mobile。可以有几件事情之一。您的node_modules文件夹是否位于项目根文件夹中？（你的配置文件所在的位置） –

所以我无法导入模块，全球性的。我只是在文件顶部

require('jquery'), 
require('jquery-mobile');

我能够在该js文件中使用$ .mobile。但遇到了一堆其他问题。

来源

2017-10-20 08:51:08

在Webpack中使用jQuery-mobile模块

回答

相关问题