javascript - Laravel-Mix 使用 webpack : JQuery is not autoloaded

标签 javascript laravel webpack laravel-mix

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

bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at 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();
}

最佳答案

安装 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>

关于javascript - Laravel-Mix 使用 webpack : JQuery is not autoloaded,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48808928/

相关文章:

javascript - HTML:当条件不再成立时,如何使条件消息消失?

javascript - 使用文本增加文本区域高度

javascript - 将对象转换为数组并将名称映射为键和子项

javascript - 是否可以在 es6 中将 css 文件作为字符串导入?

javascript - 如何在使用 HtmlWebpackPlugin 运行 webpack 时忽略 html 中的错误 js 脚本标记?

javascript - AngularJS 在 Xamarin Android Webview 中不工作

laravel - 使用node_modules/.bin/webpack时无法读取未定义的属性(mix.initialize())

php - Laravel 中更改密码重置邮件消息

php - Laravel 外键有什么问题?

javascript - Node.js 需要 webpack 模块