WebpackでjQuery-mobileモジュールを使用する

Question

私は数日間このことを頭に抱いていて、解決策を見つけることができませんでした。私はjQueryを使ってコードバモバイルアプリを持っており、webpackを使ってパッケージ化しようとしています。問題は、どのモジュールでもグローバルにも（「jquery-mobile」）を要求できないことです。私は多くのことを試みました。エラー：モジュール

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

私はモジュールが見つからないというエラーが出るグローバルpluiginとしてそれをインポートするローカル

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

を必要 解決できません。 '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
をチェックしています10

webpackを使用してjquery-mobileをインポートする方法は他にもたくさんあります。たとえば、スクリプトローダーなどですが、webpackの理解が不十分なため、この時点ではかなり失われています。

EDIT 1： 私webpack.config.jsはEDIT 2

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; 

ファイル：だから今、私はjQueryのモバイルの最新バージョンに私のpackage.jsonを変更していることを築いてきました 私は/ 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); 
    } 
} 

Answer 1

だから私は、グローバルとして、モジュールをインポートすることができませんでした。私は単にファイルの上にした

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

私はそのjsファイルで$ .mobileを使用することができました。しかし、他の多くの問題に遭遇しました。