Adding script in Laravel

Question

I am fairly new to Laravel but I'm getting to grips with it.

At the moment there a partial blade that just includes scripts from the public assets folder, like below.

<script src="{{asset('js/jquery-3.2.1.min.js')}}"></script>  
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('assets/library/slick/slick.js')}}"></script>
<script src="{{asset('assets/library/slick/slick-init.js')}}"></script>
<script src="{{asset('assets/library/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce-settings.js')}}"></script>
<script src="{{asset('js/isotope-docs.min.js')}}"></script> <!-- JQuery and Bootstrap JS -->
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('js/grid.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>

I feel like this is a bit messy and far from optimal.

I did some poking around in resources/assets/js and saw that by default Laravel uses bootstrap.js and then grabs this in app.js. Also the items in bootstrap.js seem to be grabbed directly from the node_modules folder.

Is it better practice to instead include all the JavaScript libraries in bootstrap.js?

If so, could I install all these libraries via NPM and somehow include them in the bootstrap.js file? At least the ones that are available via npm.

Then in my footer I could just include app.js instead of my individual scripts.

It might be better but keep in mind some 3rd party libraries simply can't be included that way. Rule of thumb, if you can install it using NPM then you can use it in app.js and then "compile" it using mix — apokryfos
– apokryfos, Commented May 10, 2018 at 17:23

Angad Dubey · Accepted Answer · 2018-05-10 17:13:17Z

2

You can use Laravel mix to concatenate, minify/uglify your JS, style assets.

Laravel mix documentation

answered May 10, 2018 at 17:13

Angad Dubey

5,4728 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jesse Luke Orange Over a year ago

I've had a brief look through the docs previously but is it just a case of using Mix to copy folders to the public directory?

Angad Dubey Over a year ago

@JesseOrange - it allows you to combine you JS files into 1 file - that way your blade files need to only include 1 JS file.

Collectives™ on Stack Overflow

Adding script in Laravel

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related