$('#load') 原因：未捕获的 ReferenceError：$ 未定义答案

【问题标题】：$('#load') cause: Uncaught ReferenceError: $ is not defined$('#load') 原因：未捕获的 ReferenceError：$ 未定义
【发布时间】：2021-11-17 20:01:48
【问题描述】：

我有下一个 html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="js/main.js"></script>
  </head>

<body>
     
<button type="button" class="btn btn-outline-warning"
  onclick='debugger;lazy_load( $("#load") )'
>Primary</button>

<div id="load">
  <div data-lazy-load="ajax/data-ajax.json">Loading...</div>
  <div data-lazy-load="ajax/data-ajax.html">Loading...</div>
</div>

  </body>
</html>

import { ajax_query } from "../common/ajax";

export function lazy_load( container ) {
  container ||=  $('#load');
  ...
}

webpack.config.js 有：

  plugins: config.scripts.isUseJquery
    ? [
        new webpack.ProvidePlugin({
          jQuery: "jquery",
          jquery: "jquery",
          $: "jquery",
          "window.jQuery": "jquery",
          "window.jquery": "jquery",
          "window.$": "jquery",
        }),
      ]
    : [],
};

当我打开这个页面时，我得到Uncaught ReferenceError: $ is not defined 靠近此代码lazy_load( $("#load") )。

当我删除参数$("#load") 时，lazy_load 中的相同代码可以正常工作。

即使脚本执行在debugger 处停止，我也可以在控制台上运行$("#load") 而不会出现任何错误！

为什么onclick='lazy_load( $("#load") )' 不起作用？

UPD

当我替换 onclick 时：onclick='lazy_load()'

【问题讨论】：

当 jQuery 不存在/未链接到时，您通常会看到此内容。
@RobMoll：jQuery 已链接。您可以看到 $('#load') 在 lazy_load 函数和控制台中运行良好。为什么jQuery没有链接到主页？
你试过console.log(jQuery);吗？可以吗？也许您的代码在 jQuery 之前加载？
@PeterKrebs：它可以从 lazy_load 内部获得，但不能从主页获得（请参阅更新的问题）
我建议不要将 onclick 与模块一起使用。这有点像将手动曲柄启动器连接到法拉利。相反，请使用 addEventListener 将事件侦听器附加到适当的范围。

标签： javascript jquery webpack

【解决方案1】：

使用模块编码时，您还应该显式导入 jQuery：

import $ from "jquery";
import { ajax_query } from "../common/ajax";

export function lazy_load( container ) {
  container ||=  $('#load');
  ...
}

否则在这里查看更多可能的解决方案：
How to import jQuery in webpack

【讨论】：

在您的链接之后，import $ from "jquery" 不是必需的，因为 ProvidePlugin。正如您从这个模块的问题中看到的那样$('#load') 工作正常。问题在于 index.html 看不到 $
哦，对了，如果你确定的话。您为什么不将该代码也移到模块中？
因为 index.html 知道要查找的元素的 ID，而不是模块
似乎我找到了解决方案，请参阅下面的答案

【解决方案2】：

要使$ 全球化，我必须公开它。

所以我安装expose-loader 并调整我的webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("jquery"),
        loader: 'expose-loader',
        options: { exposes: [ '$', 'jQuery' ] },
      },
    ],
  }
}

注意：对于 webpack 5 有不同的配置格式，所以我安装 expose-loader 1.0.3 版

【讨论】：