在 Webpack 中使用 jQuery-mobile 模塊

Question

幾天來我一直在思考這個問題，但無法找到解決方案。 我有一個使用 jQuery 完成的cordova 移動應用程序，我正在嘗試使用 webpack 對其進行打包。 問題是我無法在任何模塊或全局中 require('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. jQuery Mobile、NPM 和 WebPack 的問題
2. 使 jQuery-Mobile 與 webpack 一起工作
3. https://github.com/styleguidist/react-styleguidist/issues/541
4. https://webpack.github.io/docs/shimming-modules.html

還有許多其他使用 webpack 導入 jquery-mobile 的方法，例如 script-loader 但由於我對 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-mobile 並使用 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 和 jQuery-mobile 的頁面內容，但這似乎不起作用。 我得到的錯誤是

TypeError: n.pageContainer is undefined

所以基本上$.mobile.pageContainer不被識別為 jquery-mobile 對象。

我的代碼

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 。 但遇到了一堆其他問題。