我使用Laravel 5.6,我删除了Vue.JS在项目上使用jQuery。我可以在JS文件中使用jQuery,但不能在模板中使用它。
我创建了一个产量来放置Javascript,该产量在页面末尾加载。
我查看了app.js
和bootsrap.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) {}
....
答案 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