Laravel-Mix 使用 webpack：JQuery 未自动加载答案

【问题标题】：Laravel-Mix using webpack: JQuery is not autoloadedLaravel-Mix 使用 webpack：JQuery 未自动加载
【发布时间】：2018-07-26 07:25:41
【问题描述】：

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

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

如您所见，我在页面底部的脚本标记中包含引导程序，并且 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();
}

【问题讨论】：

我相信你应该把 bundle.js 放在 bootstrap.min.js 上面？如果这不起作用，我会看看这个线程：github.com/JeffreyWay/laravel-mix/issues/646 - 将 bootstrap.min.js 添加到mix.js() 应该会删除这个错误，但我理解你可能不想这样做。
事实上，我想创建 2 个文件以包含在我的刀片模板中：bundle.js 和 vendor.js。是否可以使用 mix.extract 创建 vendor.js 并指定内部库文件的路径？

标签： javascript laravel webpack laravel-mix

【解决方案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>

【讨论】：