How to properly include a library from node_modules into your project?

13
votes

the question can maybe be stupid but did not find the answer till now.
I'm trying to include a library from node_modules, from what I've learn since yesterday we should include like that with asset:

{{-- bootstrap 4.1.3 --}} 
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">

I want to add selectize.js into my project so I used npm install selectize --save to be directly install and save into package.json(dependencies).

My question is, how can I include that now? Just like default bootstrap is. How can I go from node_modules/ to public/?
Should I do it manually or there is a more professional/cleaner way to do it?
Thank you for the help.

2
laravelnpmassetsnode-modulesselectize.js
the easiest way, apart from my answer, is just save it, grab the dist files manually and copy them on your public folder, then just access them as assets. but for really take advantage of npm and laravel webpack mix... you gotta do as the documentation says. - Erubiel
Do you want to include it in your main app.js file or have it as a standalone file? - Rwd

2 Answers

21
votes

So after a lot of youtube videos and google it, I found the answer i was looking for.
Here are the steps:

1- In the webpack.mix.js:

mix.scripts([
        'node_modules/bootstrap/dist/js/bootstrap.js',
        'node_modules/selectize/dist/js/selectize.js'
    ],  'public/js/app.js')

    .styles([
        'node_modules/bootstrap/dist/css/bootstrap.css',
        'node_modules/selectize/dist/css/selectize.css',
        'resources/assets/css/app.css'
    ],  'public/css/app.css');

2- npm run dev
3- import in the view 

<link rel="stylesheet" href="{{asset('css/app.css')}}">  
<script src="{{asset('js/app.js')}}"></script>
6
votes

This should work, add this line to the either bootstrap.js or app.js files.

window.selectize = require('selectize');

Or if you just want to load the js, something like

require('selectize/dist/selectize.js');

Should work

Don't forget to then do a: npm run dev or npm run production

Note: i never used selectize so i cannot help you on the calls to the library... but something like that should load it.

The last step (npm run dev) adds selectize to the compiled app.js on your public folder

The CSS part you add it on app.scss just follow the example that is given.

Also, before all that... you should have run php artisan preset none/bootstrap/vue and npm install refer to the docs for more info on this: https://laravel.com/docs/5.6/frontend