Verwenden von jQuery-Mobile-Modul mit Webpack

Question

Ich habe mich für ein paar Tage um diesen Kopf geschlagen und nicht in der Lage, eine Lösung zu finden. Ich habe eine cordova mobile App mit jQuery gemacht und ich versuche, sie mit Webpack zu packen. Das Problem ist, dass ich (jquery-mobile) in keinem Modul oder global anfordern kann. Ich habe viele Dinge ausprobiert. Erfordern das Modul lokal

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

es als globale pluigin importieren

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

ich den Fehler, dass Module nicht gefunden: Fehler: nicht auflösen "Jquery". Es ist immer noch da in meinen Node-Modulen.

Mein package.json hat

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

ich die folgenden Ressourcen

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
überprüft haben 10

Es gibt viele andere Möglichkeiten, jquery-mobile mit Webpack zu importieren, z. B. script-loader, aber aufgrund meines schlechten Verständnisses von webpack bin ich an diesem Punkt ziemlich verloren.

EDIT 1: Meine webpack.config.js Datei

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; 

EDIT 2: So, jetzt habe ich meine package.json auf die neueste Version von jQuery-Mobile und gebaut geändert, dass Modul mit Grunzen erhielt ich den/dist-Ordner

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

und ich änderte meinen webpack.config.js zu

012.351.

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; 

Der Build ist erfolgreich. Aber ich habe ein Stück Testcode, um den Seiteninhalt zu ändern, der sowohl jQuery als auch jQuery-mobile verwendet und das scheint nicht zu funktionieren. erhalte ich die Fehlermeldung, dass

TypeError: n.pageContainer is undefined 

Also im Grunde $.mobile.pageContainer nicht als jquery-mobile Objekt erkannt wird.

Mein Code

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

So war ich nicht in der Lage, die Module als global zu importieren. Ich habe einfach oben auf der Datei

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

Ich konnte $ .mobile in dieser js-Datei verwenden.Aber in eine Reihe anderer Probleme geriet.