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 的包含的调用顺序。