Laravel Mix - 不能在模板中使用 jQuery答案

【问题标题】：Laravel Mix - can't use jQuery in templateLaravel Mix - 不能在模板中使用 jQuery
【发布时间】：2019-01-12 14:09:51
【问题描述】：

我使用 Laravel 5.6，我删除了 Vue.JS 以在我的项目中使用 jQuery。我可以在我的 JS 文件中使用 jQuery，但我不能在我的模板中使用它。

我创建了一个yield来放Javascript，这个yield是在页面末尾加载的。

我看了app.js和bootsrap.js默认文件，好像是在boostrap中加载了jQuery：

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

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

我试图在我的 app.js 中定义全局：

let $ = require('jquery');
// create global $ and jQuery variables
global.$ = global.jQuery = $;

我把它放在我的 webpack.mix.js 中：

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

我没有遇到任何错误，我只是无法在刀片模板中使用 $ 或 jQuery，我收到以下消息：

未捕获的引用错误：$ 未定义

在 Symfony 4 中，我只将全局 $ 放在 app.js 中，它可以工作。我错过了什么？

我的 app.js：

require('./bootstrap');
require('./custom-checkboxes');

$(function() {
    $('body').click(function(e) {
        // it works
    });
});

我的 webpack.min.js ：

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sass('resources/assets/sass/pages/homepage.scss', 'public/css')
   .sass('resources/assets/sass/pages/calendar.scss', 'public/css')
;
mix.autoload({
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'
});

mix.copyDirectory('resources/assets/img', 'public/img');

if (mix.inProduction()) {
    mix.version();
}

我的 bootstrap.js ：

window._ = require('lodash');
window.Popper = require('popper.js').default;

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

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

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

....

【问题讨论】：

你没有使用引导程序吗？
我使用 bootstrap，它在我的主要 app.js 中是必需的
Laravel 附带的默认代码（try/catch 块）应该允许 jQuery 通过 window 对象在全局范围内可用。你不是这样吗？你使用的是什么版本的 Laravel？
我使用的是 5.6，我尝试在模板中使用 window.$，但同样的错误。
让我们continue this discussion in chat。

标签： laravel laravel-mix

【解决方案1】：

我有同样的问题。我所做的是从引用 app.blade 文件中的 app.js 文件的脚本标记中删除 defer 属性，并将该脚本标记放在页面底部。

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

把这个改成，

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

并在其下方添加其他 js 文件（如果需要）。无需配置任何其他文件或将 jQuery 的外部引用添加为 it loaded by Mix。

你也可以看看这个。 Laravel 5 WebPack JQuery - $ is not defined

【讨论】：