Question

我正在尝试使用 Laravel-Mix 编译我的Laravel项目，但是我遇到一个问题，即使使用mix.autoload指令，jQuery也不会在浏览器中自动加载：

bootstrap.min.js：6未捕获错误：Bootstrap的JavaScript需要 jQuery的在bootstrap.min.js：6

如您所见，我在页面底部的脚本标记中包含bootstrap，jquery是npm package.json中依赖项的一部分。

index.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Test</title>
    </head>
    <body>
        <p>Hello</p>
        <script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="{{ asset(mix('js/bundle.js')) }}" type="text/javascript"></script>
    </body>
</html>

webpack.mix.js

const { mix } = require('laravel-mix');

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

mix.js(['assets/js/script.js'], 'public/js/bundle.js');

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

Answer 1

安装jQuery和Popper。

npm i jquery
npm i popper.js

在您的/resources/js/bootstrap.js中。

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

在webpack.mix.js中。

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')

在您的Blade模板中。

<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>

使用webpack的Laravel-Mix：JQuery没有自动加载

1 个答案: