使用Webpack的Laravel-Mix：JQuery不会自动加载

Question

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

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

如您所见，我在页面底部的脚本标签中包含了引导程序，而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 个解决方案

解决方案1
1 2019-07-02 07:39:40

使用Webpack的Laravel-Mix：JQuery不会自动加载

问题描述

1 个解决方案

解决方案1 1 2019-07-02 07:39:40

解决方案1
1 2019-07-02 07:39:40