无法通过Webpack加载jQuery

我有一个ASP.NET MVC应用程序。在这个应用程序中，我正在用Vue和webpack构建SPA。目前，我正试图导入这个控件。无法通过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 
     } 
    } 
});

当这个页面加载在浏览器中，我看到在控制台窗口中出现以下错误：

未捕获的ReferenceError：$没有定义

我怀疑这是datepicker没有正常工作在我的页面中的原因。我不明白这个错误。根据我的理解，行new webpack.ProvidePlugin({ ...应该已经解决了这个问题。当我查看生成的“shared.bundle.js”文件时，我可以看到顶部的jQuery内容。这使我更加困惑。我不明白为什么我得到这个错误。任何帮助表示赞赏！

来源

2017-10-16 Zach Templeton

可能重复[Uncaught ReferenceError：$未定义？]（https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined） – jordiburgos