Webpack에서 jQuery-mobile 모듈을 사용합니다.

Question

나는 며칠 동안 내 머리를 두드리고 해결책을 찾지 못했습니다. jQuery로 수행되는 cordova 모바일 앱이 있으며 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
,536,913,632을 확인했다있다 10

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를 모바일의 최신 버전으로 내 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" 
    }, 

을 얻은 나는

012,351,641 내 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을 사용할 수있었습니다.그러나 다른 많은 문제가 발생했습니다.