Laravel Mix-无法在模板中使用jQuery

时间:2018-08-05 10:59:41

标签: laravel mix

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

我创建了一个产量来放置Javascript,该产量在页面末尾加载。

我查看了app.jsbootsrap.js的默认文件,看来jQuery已加载到boostrap中:

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,我收到了以下消息:

  

未捕获的ReferenceError:未定义$

在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) {}

....

1 个答案:

答案 0 :(得分:0)

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

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

将此更改为

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

并在其下面添加其他js文件(如果需要)。 无需配置任何其他文件或以it loaded by Mix的形式向 jQuery 添加外部引用。

您也可以查看此内容。 Laravel 5 WebPack JQuery - $ is not defined