jQuery 没有在 bundle.js 中定义

我已经被这个问题困扰了好几天了,我已经从搜索中尝试了几十种不同的修复方法。首先,我使用 Hugo、Webpack、Node.js 和 Babel。目前,至少一切都在编译,但是当我查看 localhost 控制台时,我看到了这些错误:

Uncaught ReferenceError: jQuery is not defined
    at Object.609 (bundle.js:2)
    at n (bundle.js:2)
    at Object.83 (bundle.js:2)
    at n (bundle.js:2)
    at Module.150 (bundle.js:2)
    at n (bundle.js:2)
    at bundle.js:2
    at bundle.js:2
609 @ bundle.js:2
n @ bundle.js:2
83 @ bundle.js:2
n @ bundle.js:2
150 @ bundle.js:2
n @ bundle.js:2
(anonymous) @ bundle.js:2
(anonymous) @ bundle.js:2
localhost/:1 Refused to apply style from 'http://localhost:1313/scss/node_modules/bootstrap-icons/font/bootstrap-icons.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:1 Refused to apply style from 'http://localhost:1313/node_modules/animate.css/source/animate.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:1 Refused to apply style from 'http://localhost:1313/home/elijah/GolandProjects/ReplayRLB/website/testsite1/assets/plugins/magnific-popup/magnific-popup.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

现在我写这篇文章的主要理由是解决 jQuery 问题,但深入了解其他问题也很棒,因为我也被困了一段时间。

webpack.config.js

const path = require('path');
const webpack = require('webpack');
// const WebpackManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            }
        ]
    },
    entry: './assets/js/script.js',
    output: {
        path: path.resolve(__dirname, 'assets', 'js'),
        filename: 'bundle.js',
    },
    externals: {
        jquery: 'jQuery',
    },
    /*    plugins: [
           new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
            })
        ]*/
};

我从 script.js(又名主 js 文件)导入:

app.use("/static", express.static('./static/'));
import $ from "../plugins/jquery/jquery.min.js";
import jQuery from "../plugins/jquery/jquery.min.js";
import "../plugins/@popperjs/core/lib/popper.js";
import "../plugins/google-map/map.js";
import "../plugins/magnific-popup/jquery.magnific-popup.min";
import Shuffle from "../plugins/shuffle/shuffle.min.js";
import "../plugins/slick/slick.min.js";
import lozad from "lozad";
//Pricing Scripts
import "../js/pricing/boosting.js";
import "../js/pricing/tourneyTitle.js";
import "../js/pricing/placements.js";
import "../js/pricing/coaching.js";
/* ========================================================================= */
/*  jQuery load initialize
/* ========================================================================= */

window.$ = require('../plugins/jquery/jquery.min');
window.jQuery = $;
require('./script.js');

/* ========================================================================= */
/*  shuffle load initialize
/* ========================================================================= */

const shuffleInstance = new Shuffle(document.getElementById('grid'), {
    itemSelector: '.js-item',
    sizer: '.js-shuffle-sizer',
});

/* ========================================================================= */
/*  lazy load initialize
/* ========================================================================= */

const observer = lozad(); // lazy loads elements with default selector as ".lozad"
observer.observe();

为我的主要 js 源调用捆绑包

<script src="./assets/js/bundle.js"></script>

请注意,这不在静态/资产中,因为当我尝试它不起作用并给我一个错误,说您无法将静态文件发送到客户端或 Web(类似这些行)。我的资产目录相当于我认为的 src 目录。

stack overflow jQuery is not defined in bundle.js
原文答案
author avatar

接受的答案

“jQuery not defined”错误通常意味着您没有加载 jQuery 库。我猜你在尝试使用 ES6 Import 语法?

  1. import { $, jQuery } from 'jquery'; 类型语句取决于您使用的 jQuery 版本,请检查(我不知道您使用的是什么版本的 jQuery),而且 jQuery 导入似乎有点不同?见上面的进口声明。
  2. 为了简单起见,您还可以测试传统的 jQuery 导入语句 a la: <script type="text/javascript" src="https:// CDN LINK HERE "></script> and see if 您可以获得在控制台中工作的基本 jQuery 语句。

对不起,我的英语不是最好的,但以上内容可能有助于调试。

让我知道。


答案:

作者头像

我收到此错误。

Uncaught ReferenceError: $ is not defined

因此,为了修复它,在我的 main.js(有人将其命名为 entry.js)中,我添加了这一行。

global.jQuery = global.$ = require('jquery');

webpack.config.js 如下。

const path = require('path');

var $ = require('jquery');

let config = {
  entry: ['./main', './node_modules/jquery', './node_modules/jquery-validation', './node_modules/jquery-validation-unobtrusive', './node_modules/bootstrap'],
  output: {
     publicPath: "/js/",
     path: path.join(__dirname, '/wwwroot/js/'),
     filename: 'main.build.js'
  },
}

module.exports = config;