установка пакетов JS с использованием npm и компиляция с помощью веб-пакета laravel mix

Question

установка пакетов JS с использованием npm и компиляция с помощью веб-пакета laravel mix

Я новичок в Laravel и следую инструкциям по Laracast для Laravel 5.4
Я читал о Laravel Mix и о том, как мы можем скомпилировать наши ресурсы, используя инструмент Webpack Laravel Mix. Поэтому я попытался добавить пакет JavaScript

1- Установлен AlertifyJS с помощью НПМ.
2- Добавлено require('alertifyjs') в resources\assets\js\bootstrap.js
3- Выполнено npm run dev, Активы были собраны в public\js\app.js где я могу видеть alertifyjs код, найдя alertify ключевое слово.

я использовал alertify код, как показано ниже в ресурсы \ активы \ JS \ app.js:

`$(document).ready(function(){
$('.run').on('click' , function(event){
alertify.alert("This is an alert dialog.", function(){
alertify.message('OK');
});
});
});`

Просмотреть файл:

@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading text-center"><h2>THIS WILL BE THE HOME PAGE<h2></div>
<div class="panel-body text-center">
Home Page Content Goes Here!
</div>
<button class="run">Show Alert</button>
</div>
</div>
</div>
</div>
@endsection

Проблема: Когда я нажимаю на кнопку Показать оповещение ,
оповещение не определено ошибки записываются в консоль. Я что-то упускаю при компиляции ресурсов?

1

laravel mix npm php webpack

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы должны требовать оповещения в вашем app.jsгде вы на самом деле используете его. Webpack хранит каждый файл как модуль, просто объединяет их в один файл (связку). Но вы ожидаете, что он будет доступен глобально, что не очень хорошая идея, и модули, которые зависят от глобалов (например, плагины jQuery), называются устаревшие модули в официальном пакете документов. Посмотри на Шиммирование для более подробной информации о таких устаревших модулях.

В любом случае, это не так, но имейте в виду, что модули, которые вы устанавливаете с помощью npm, всегда должны быть в файле, который вы на самом деле используете. Модули имеют свою собственную область, это не просто сборка файлов, когда они вам нужны. Если эта концепция модулей является новой для вас или вы хотите ее лучше понять, вам следует прочитать Node.js Модули, потому что это интенсивно используется в JavaScript.

Ваш resources\assets\js\app.js необходимо изменить на:

const alertify = require('alertifyjs');

$(document).ready(function(){
$('.run').on('click' , function(event){
alertify.alert("This is an alert dialog.", function(){
alertify.message('OK');
});
});
});

4