Подключение плагинов laravel mix?

Question

[ThreegunD]

Laravel 5.5
Пытаюсь подключить плагин "sweetalert2"
Выполнил "npm install --save sweetalert2"
В "assets/app.js" прописал require('sweetalert2')
Запустил npm run watch
Вылезло уведомление, что всё собрано.
При попытке вывести пример ,пишет "swal is not defined"

Что я не так делаю? и как вообще подключаются сторонние плагины?

Answer 1

[hakkol]

var swal = require('sweetalert');

Comments

[ThreegunD]

Это в assets/app.js нужно прописать , вместо простого "require('sweetalert2') " ?

var swal = require('sweetalert2'); - прописал в assets/app.js так, но результат тот же

[hakkol]

ThreegunD, Вообще должно работать, скиньте пример кода, где вы пытаетесь вызвать swal

[ThreegunD]

hakkol, пробовал по-разному, везде эффект тот же.
Конкретно сейчас попробовал вызвать прям с конца страницы,чтобы уж наверняка
window.onload = function () {
swal({
title: "Here's a title!",
});
}

[hakkol]

ThreegunD, так этот код в app.js нужно писать:

var swal = require('sweetalert');

window.onload = function () {
    swal({
        title: "Here's a title!",
    });
}

[ThreegunD]

hakkol, не думаю, что его нужно там прописывать, в этом файле я только подключаю скрипты. Но прописал , как ты сказал эффект тот же

[hakkol]

ThreegunD, Если скрипт не версионируется, то нужно проверить, что app.js не закэширован и что в нем присутствуют последние изменения

[ThreegunD]

hakkol, удалил public/app.js чтобы он собрался заново, но резултата не дало.
Можешь на своём примере, подключить этот плагин и подробно шаг за шагом показать, что ты делаешь.
Мне кажется я что-то упустил..

[hakkol]

ThreegunD, Развернул чистый laravel 5.5. Установил npm install --save sweetalert2. Подключил в app.scss @import "~sweetalert2/dist/sweetalert2.min.css";
В app.js

var swal = require('sweetalert2')

swal('Hello world!')

На страницу добавил

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>

Все работает

[ThreegunD]

hakkol, спасибо тебе большое за проделанную работу.
Последний вопрос, app.js в твоём примере это "assets/app.js" или public/app.js(уже скомпилированный)

[hakkol]

ThreegunD, public/app.js конечно, css/app.css вообще не существует в папке resources.

[ThreegunD]

hakkol, там app.scss.
А mix разве не перезапишет public/app.js после выполнения npm run ?

[hakkol]

ThreegunD, Я знаю, что там app.scss. Я к тому, что 100% смотрит в public. Mix всегда перезаписывает те файлы, которые указываются в webpack.mix.js, после запуска npm run. Я использовал npm run development

[ThreegunD]

hakkol, а как теперь мне вызывать эту модаль в другом скрипте, например есть у меня скрипт с аякс запросом и хочу вызвать в нём эту модаль. В каждом скрипте где я хочу это сделать нужоно выполнить var swal = require('sweetalert2')?

[hakkol]

ThreegunD, Да, в каждом месте добавлять
var swal = require('sweetalert2')

[ThreegunD]

hakkol,
Вот мой assets/app.js
Нельзя ли как-нибудь зарегистрировать глобально этот swal, чтобы скрипты за ним уже знали, что такое swal?

[hakkol]

ThreegunD, А в этом и смысл, что в app.js мы просто подключаем файлы и все. А в самих файлах мы подключаем все плагины, которые нам нужны. Если есть желание, то можно в том же bootstrap.js можно подключить.
window.$ = window.jQuery = require('jquery');
Вот так в нем делают возможным вызов jquery из любого места, но это плохая практика.

[ThreegunD]

hakkol, понял, огромное спасибо за разъяснение )

[ThreegunD]

hakkol, последний вопросик, а мои самописные скрипты где нужно подключать ?
Сейчас я подключаю их в assets/app.js
Может их правильнее в webpack.mix.js добавлять?

[hakkol]

ThreegunD, Что правильно, а что не очень, я сказать не могу. Обычно я вижу, что webpack.mix.js или gulpfile.js (старые версии laravel) ничего не подключают, а только описывают операции, которые нужно сделать над главными скриптами, которые потом подключаются во view.