無法通過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