Laravel-Mix с использованием веб-пакета: JQuery не загружается автоматически

Я пытаюсь скомпилировать свой проект Laravel с помощью Laravel-Mix, но у меня возникает проблема, когда jQuery не загружается автоматически в браузере даже с директивой mix.autoload:

bootstrap.min.js:6 Неперехваченная ошибка: JavaScript Bootstrap требует 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();
}

webpack javascript laravel laravel-mix
person wawanopoulos    schedule 15.02.2018    source источник
comment
Я считаю, что вы должны разместить bundle.js над bootstrap.min.js? Если это не сработает, я бы посмотрел эту тему: github.com/JeffreyWay /laravel-mix/issues/646 — добавление bootstrap.min.js в mix.js() должно устранить эту ошибку, но вы можете этого не делать, как я понимаю.   -  person HelloSpeakman    schedule 15.02.2018
comment
Я хотел бы создать 2 файла для включения в мой шаблон блейда: bundle.js и vendor.js. Можно ли создать vendor.js с помощью mix.extract и указать путь к файлу внутренней библиотеки?   -  person wawanopoulos    schedule 15.02.2018

Ответы (1)


arrow_upward
2
arrow_downward

Установите jQuery и Поппер.

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>
person Karl Hill    schedule 02.07.2019