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.

Mike is a Technical Director who has worked on eCommerce projects since 2014 and has been with Develo since 2015. He became certified in Adobe Commerce in 2023. Mike’s favourite aspects of web development are tackling the intricate eCommerce challenges with the bespoke platform Magneto/Hyvä, and the best achievement from working at Develo is fostering a culture of growth and innovation within our team. His favourite aspect of Magento is tackling the intricate eCommerce challenges with the bespoke platform Magneto/Hyvä. His favourite achievement at Develo so far is sharing knowledge about new technologies, notably developing the Stripe compact module for Hyvä. Outside of work, he can be found spending time with his family, baking and walking his dogs.

Develo is a leading Magento agency and eCommerce web development company based in Birmingham, in the UK, serving clients globally since 2010. We provide our Learn articles to share knowledge of magento web development, web app development and more to the wider web developer community. To extend your team with our white label web developers, collaborate or consult with us on your project contact us here.