Friday, March 3, 2017

installing JS packages using npm and compiling with webpack laravel mix

I am new to Laravel and following Laracast tutorials for Laravel 5.4
I read about Laravel mix and how we can compile our assets using Webpack Laravel Mix tool. So I tried adding a JavaScript Package

1- Installed AlertifyJS using npm.
2- Added require('alertifyjs') in resources\assets\js\bootstrap.js
3- Executed npm run dev. Assets were compiled to public\js\app.js , where I can see alertifyjs code by finding alertify keyword.

I used alertify code like below in resources\assets\js\app.js:

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


View File:

@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


Problem: When I click on button Show Alert ,
alertify is not defined errors is logged to console. Am I missing something while compiling assets?



via zubics

Advertisement