올바르게 처리하는 방법 Webpack 및 jQuery 의존성

프로젝트에 Vue CLI을 기반으로 프로젝트를 만들고 MaterializeCSS을 추가했습니다.올바르게 처리하는 방법 Webpack 및 jQuery 의존성

데브과 자극 : 내 webpack.dev.conf.js, webpack.prod.conf.js 및 다음과 같은 webpack.base.conf.js (단지 supppose 관련 부분)을 변경

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

자료 :

resolve: { 
extensions: ['.js', '.vue', '.json'], 
alias: { 
    '$': 'jquery', 
    'jQuery': 'jquery', 
    'window.$': 'jquery', 
    'window.jQuery': 'jquery',  
    '@': resolve('src'), 
    'vue$': 'vue/dist/vue.esm.js' 
}

main.js이 있습니다 내용 :

내가 $('#modal').modal('open') 전화 (3210)는, 초기화 후에, 나는 메시지를받을 : 내가 제대로 된 방법을 사용하여, VueJS 지침 및 Materializecss 다룰 때

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_jquery__(...).modal is not a function 
at Object.displayLoading (eval at <anonymous> (0.js:278), <anonymous>:10:55) 
at VueComponent.searchBCP (eval at <anonymous> (0.js:293), <anonymous>:107:63) 
at boundFn (eval at <anonymous> (app.js:810), <anonymous>:125:14) 
at HTMLButtonElement.invoker (eval at <anonymous> (app.js:810), <anonymous>:1659:18) 
displayLoading @ display-loading.js?d781:6 
searchBCP @ script.js?7493:104 
boundFn @ vue.esm.js?65d7:124 
invoker @ vue.esm.js?65d7:1658

내 문제도있다. 누구도이 어려움에 직면 했습니까? myfile.js에 추가됩니다 어떤

require("imports-loader?$=jquery!./myfile.js");

출처

2017-04-12 Fabio Fogliarini Brolesi

당신은 당신이 main.js 당신이해야 myfile.js에 $를 참조하면 JQuery와 을 참조하고자하는 파일의 적절한 수입을 누락

var $ = require("jquery");

참조 번호 : https://webpack.github.io/docs/shimming-modules.html

출처

2017-04-12 01:40:58

jQuery가 런타임에 종속성을 번들 및 검색하지 못하도록하려면 webpack 구성 파일에 externals 구성을 사용할 수 있습니다.

externals: { 
    $: "jquery", 
    jQuery: "jquery", 
    "window.jQuery": "jquery" 
}

출처

2017-04-12 03:33:02 Ricky

올바르게 처리하는 방법 Webpack 및 jQuery 의존성

답변

관련 문제