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

Question

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.

Answer 1

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>

Answer 2

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