webpack - ReferenceError: $ 未定義

Question

我已經閱讀了這個問題的很多答案，但我無法解決我的問題，所以我來這里尋求幫助...

這是我的 webpack conf 文件：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// https://github.com/webpack-contrib/mini-css-extract-plugin
const webpack = require('webpack');
const jquery = require('jquery');

module.exports = {
    mode: 'development',
    entry: './assets/js/app.js',
    output: {
        path: path.resolve(__dirname, 'public/dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                            hmr: process.env.NODE_ENV === 'development',
                        },
                    },
                    'css-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 100000,
                        },
                    },
                    {
                        loader:"file-loader",
                        options:{
                            name:'[name].[ext]',
                            outputPath:'images/' //the images will be emited to dist/images/ folder
                        }
                    }
                ],
            },
            {
                // Exposes jQuery for use outside Webpack build
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                }, {
                    loader: 'expose-loader',
                    options: '$'
                }]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[name]-[id].css',
            ignoreOrder: false,
        }),
        /* Use the ProvidePlugin constructor to inject jquery implicit globals */
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery'",
            "window.$": "jquery"
        })
    ],
    /*resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }*/
};

我的入口文件 app.js ：

// Import CSS
import 'bootstrap/dist/css/bootstrap.css';
import '@fortawesome/fontawesome-free/js/all';
import '../css/style.css';

// Import JS
import $ from 'jquery';
window.$ = jQuery;
window.jQuery = jQuery;

import * as JSZip from 'jszip'; //export xlsx

import 'bootstrap';

//require('webpack-jquery-ui');
//require('webpack-jquery-ui/css');

我一直在嘗試不同的解決方案，但當我在代碼中使用 jQuery 時，我仍然得到：

參考錯誤：$ 未定義

你能幫我一下嗎？

Answer 1

將 jquery 庫添加為外部的一種解決方案。 第二種解決方案是將 jquery 添加到包中。

1. 外部webpack.js

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

將 jquery 添加到 html

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">

在js中添加jquery

import $ from 'jquery';

const test = $('h1').text();
console.log(`from jquery: $ {test}`);

2.第二種方案，將jquery加入bundle首先需要在本地安裝jquery。

yarn add -D jquery

在js中添加jquery

import $ from 'jquery';

const test = $('h1').text();
console.log(`from jquery: $ {test}`);

---

這可以使用 splitChunks 進行優化和拆分，但這是另一個條目的故事；)

我添加了一個外部jquery使用的例子

Answer 2

在你的代碼中看看這個：

import $ from 'jquery';
window.$ = jQuery;
window.jQuery = jQuery;

想一想。

.

.

.

.

.

.

.

.

.

.

.

.

請注意，您從未定義jQuery 。 修理它。

import $ from 'jquery';
window.$ = $;
window.jQuery = $;

Answer 3

好吧，這個錯誤很愚蠢，app.js 在布局結束時被調用，我試圖在視圖中使用 jQuery。

因此，請確保檢查損壞的代碼和包含 jquery 的包含的調用順序。