与Webpack一起使用jQuery-mobile模块

Question

几天来，我一直在胡思乱想，却找不到解决办法。我有一个科多瓦移动应用程序完成了与jQuery，我正在尝试包它使用webpack。问题是，我无法要求(‘jquery-mobile’)在任何模块或全球。我试过很多东西。在本地需要模块

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

将其导入为全局插件

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"
  }

我检查了以下资源

1. Issues with jQuery Mobile, NPM, and WebPack
2. making jQuery-Mobile work with webpack
3. https://github.com/styleguidist/react-styleguidist/issues/541
4. 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:，所以现在我已经将更改为最新版本的jQuery，并使用grunt构建了这个模块，我获得了/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和，这似乎不起作用。我知道一个错误

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);
  }
}

Answer 1

所以我无法将模块作为全局导入。我只是在文件上面做了

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

我能够在js文件中使用$.mobile。但遇到了很多其他的问题。