在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"
}
我已经检查了以下资源
- Issues with jQuery Mobile, NPM, and WebPack
- making jQuery-Mobile work with webpack
- https://github.com/styleguidist/react-styleguidist/issues/541
- https://webpack.github.io/docs/shimming-modules.html
还有很多其他的方式来使用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);
}
}
答
所以我无法导入模块,全球性的。我只是在文件顶部
require('jquery'),
require('jquery-mobile');
我能够在该js文件中使用$ .mobile。但遇到了一堆其他问题。
你能告诉我你的webpack配置文件吗? –
hi @Rick van Osta我在问题中添加了文件。 –
当你删除* jquery-mobile *时它工作吗?你给出的错误表明找到jquery的问题,而不是jquery-mobile。可以有几件事情之一。您的node_modules文件夹是否位于项目根文件夹中? (你的配置文件所在的位置) –