0
ASP.NET MVC 앱이 있습니다. 이 응용 프로그램에서는 Vue 및 webpack으로 SPA를 제작하고 있습니다. 현재이 datepicker 컨트롤을 가져 오려고합니다.Webpack을 통해 jQuery를로드 할 수 없습니다.
불행히도 webpack은 문제를 일으키는 것으로 보입니다. 주요 의존성 인 jQuery가로드되지 않는 것 같아서 이유를 이해할 수 없습니다.
_Layout.cshtml을
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
<script src="~/js/shared.bundle.js" asp-append-version="true"></script>
</head>
<body>
<h1>Hello</h1>
<script type="text/javascript">
$(document).ready(function() {
console.log("ready!");
});
</script>
</body>
</html>
webpack.config.js
"use strict";
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
shared: './src/js/shared.js',
page: './src/js/page.js'
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
moment: 'moment',
}),
new webpack.optimize.CommonsChunkPlugin({ name: 'shared' })
],
output: {
publicPath: "/js/",
path: path.join(__dirname, '/dist/'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
query: {
presets: ['es2015']
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
}
]
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
extensions: ['.js', '.vue']
}
};
Index.cshtml
:나는 다음이
<h2>Welcome</h2>
<hr />
<div id="view" v-cloak>
<div class="card">
<div class="card-header"><h5>Selection Details</h5></div>
<div class="card-body">
<div class="form-row">
<div class="form-group col-8">
<label for="birthdate">Birthdate</label>
<date-picker v-model="birthDate"></date-picker>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="~/js/page.js" asp-append-version="true"></script>
page.js
import Vue from 'vue';
import datePicker from 'vue-bootstrap-datetimepicker';
$(document).ready(function() {
var v = new Vue({
el: document.getElementById('view'),
components: {
"datePicker": datePicker
},
data: {
birthDate: null
}
}
});
이 페이지가로드 브라우저에서, 나는 콘솔 창에 다음과 같은 오류를 참조 :
catch되지 않은 ReferenceError가 : $가 정의되어 있지 않습니다
이것이 내 페이지에서 datepicker가 제대로 작동하지 않는 것으로 판단됩니다. 나는이 오류를 이해하지 못한다. 내 이해에서 new webpack.ProvidePlugin({ ... 줄이이 문제를 처리해야합니다. 생성 된 "shared.bundle.js"파일을 보면 맨 위에 jQuery 내용을 볼 수 있습니다. 이것은 나를 더욱 혼란스럽게합니다. 왜이 오류가 발생하는지 이해할 수 없습니다. 어떤 도움을 주셔서 감사합니다!
[Uncaught ReferenceError : $ is not defined?] (https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) – jordiburgos