需要帮助获取 JS 文件以使用 Laravel 5.7 和 Laravel Mix 查找 JQuery答案

【问题标题】：Need help getting JS files to find JQuery with using Laravel 5.7 with Laravel Mix需要帮助获取 JS 文件以使用 Laravel 5.7 和 Laravel Mix 查找 JQuery
【发布时间】：2018-10-24 13:39:51
【问题描述】：

我正在像这样的 resources/bootstrap.js 文件中全局加载 JQuery。

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

我还有一个小脚本来测试 JQuery 是否已加载，并且我已确认它已加载。

window.onload = function () {
  if (window.jQuery) {
      // jQuery is loaded
      alert("Yeah!");
  } else {
      // jQuery is not loaded
      alert("Doesn't Work");
  }

}

但是，我在依赖于 Jquery 的视图中有一个 javascript 文件。

@section('footer')
    <script src="foo.js"></script>
@endsection

在运行 npm run dev 打开 chrome 开发者工具并查看我的应用程序的控制台消息后，我看到以下行

Uncaught ReferenceError: jQuery is not defined at foo.js:100

表示 foo.js 找不到 JQuery。我想保持全局加载 JQuery 并使其他文件能够引用 JQuery。

对此的任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery laravel-mix laravel-5.7

【解决方案1】：

在 laravel 根文件夹中检查你的 webpack.mix.js 并确保你定义了要自动加载的 jquery

mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery'],
 });

在你的 bootstrap.js 文件之后，检查它是否包含这部分代码

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

那么你应该在命令行中执行这个命令来编译js并将laravel置于开发者模式

npm 运行开发

最后确保您在主布局中在 app.js 调用之后包含 jquery 代码（非常重要）

我遇到了同样的问题，这对我有帮助。欲了解更多信息，我邀请您查看此页面https://laravel.com/docs/5.7/mix

【讨论】：

我将上述代码添加到我的 webpack.mix.js 文件中的 mix.autoload 中，并验证我的 bootstrap.js 中有 try-catch 子句 文件。但是，我仍然收到相同的错误。
@CurtisColly 您的节页脚是否在您的 app.js 调用下？
是的。我还尝试将 app.js 移动到页脚下方并收到相同的错误。
我不确定但值得尝试将 bootstrap.js 中的 jquery 行更改为 global.$ = global.jQuery = require('jquery');

【解决方案2】：

我发现了问题。它在这里。

<script src="{{ asset('js/app.js') }}" defer></script>

JQuery 库正在 app.js 中加载。但是， defer 指示脚本标记的内容在页面加载之前不执行。因此，我的自定义 js 文件找不到 Jquery，因为它尚未加载。

摆脱 defer 并将我的自定义脚本放在它下面将使脚本能够找到和引用 JQuery。

【讨论】：