Develo Design

Develo Design Menu

Laravel 5.5 – Bundling Javascript from NPM modules

If you use NPM to install vendor modules, heres an easy way to include them in your bundled app.js file so you can use them in your Laravel app, this is assuming you’ve gone through the process of setting up the ideal frontend workflow using Laravel Mix already. If you haven’t setup Laravel Mix, you can find the docs for it here: https://laravel.com/docs/5.5/mix

Inside your resources/assets/js/app.js file, you can simply add require('MODULE_PATH_RELATIVE_TO_NODE_MODULES')  . So for example, if you wanted to add Typeahead.js that is installed via NPM, you’d add the following:

require('typeahead.js');

Or for fine-grained control on what file you want to use, you can be more specific

require('typeahead.js/dist/typeahead.jquery.min.js');

If you wanted to have even more control on how you call and import your package, you can use the following format;

window.Typeahead = require('typeahead.js/dist/typeahead.jquery.min.js');

You can even include a file from a path relative to the app.js if required. However majority of our frontend vendor files are installed via NPM.

We use NPM (a dependency management tool) as this makes the job of updating/maintaining our frontend dependencies a much easier process, most mainstream packages can be found on NPM.

Share

Loading Disqus Comments ...
Loading Facebook Comments ...

Post Comment

Your email address will not be published. Required fields are marked *

Discuss My Project

We want to hear about your project! Provide us with a few details and we’ll get back to you for a chat.