Question

我有一个ASP.NET MVC应用程序。在这个应用程序中，我正在使用Vue和webpack构建SPA。目前，我正在尝试导入此datepicker控件。

不幸的是，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
        }
    }
});

在浏览器中加载此页面时，我在控制台窗口中看到以下错误：

未捕获的ReferenceError：$未定义

我怀疑这就是datepicker无法正常在我的页面中工作的原因。我不明白这个错误。根据我的理解，行new webpack.ProvidePlugin({ ...应该处理此问题。当我看到＆＃34; shared.bundle.js＆＃34;生成的文件，我可以在顶部看到jQuery内容。这让我更加困惑。我不明白为什么我会收到此错误。任何帮助表示赞赏！

Answer 1

你是对的，ProviderPlugin应该让全局的jquery可用。

尝试将page.js此行import $ from 'jquery';添加到您的导入中。

无法通过Webpack加载jQuery

1 个答案: