How to integrate Magento 2 Third Party plugins & Libraries for Front-end?

When it’s all about eCommerce development, Magento rule the game. All store owners want to create some unique design for their store, but to create an unique design, front-end developers may have to integrate or use third party plugins & libraries. When it comes to Magento, integrating third party plugins and libraries for the first time is very complex, so here we’ll help you by showing how to install third party plugins and libraries.  
Now let’s start!
First download and add plugin dependency files to project web folder.
You need to download and place your plugin’s CSS and JS files in the directories as shown below:

Add JS: 
{Root current Theme folder} / web / js / vendor / espl-knockout / plugin js files 
Add CSS: 
{Root current Theme folder} / web / css / vendor / espl-knockout / plugin css files

Note:
Here you need to separate js and css files, so that we can identify the project files and third-party vendor files.
If the vendor files contain the SASS/LESS files, then you need to import the plug-in files directly to your main styles files for your theme.
Example.

@import 'vendor/ espl-knockout / my-knockout.js ; 
@import 'vendor/ espl-knockout / espl-knockout-default-theme';

Adding the plugin JS library to RequireJS
Using RequireJs, we can automatically load all the required js files in Magento 2 and it also make our created js file globally available to all the modules , and it will work well with  the auto-load system of Magento 2. To make it work, you need to create a file located in your current theme’s root directory.
Created RequireJS file will look somewhat like this

var config = {
    "map": {
        "*": {
            "slick": "js/slick",
            "theme": "js/theme",
            "espl-knockout": "js/espl-knockout.min",
            "unveil": "js/jquery.unveil",
            "smartresize": "js/smartresize"
        }
    }
};

Note:
If Magento 2 is in developer mode, then all the files will automatically group or collaborate all requirejs-config.js files into the pub/static/_requirejs. Therefore, you need to refresh this folder for the new requirejs-config.js configuration files to be picked up.
Finding your plugin’s module folder & creating search specific JS
You created espl-knockout.js library, so now you can use it. However, there are some notices for you in order to use it well:

• Retrieve the correct module name because the format of the name can vary depending on where you retrieve it from.
• You will see Magento 2’s core module folders in magento vendor / magento / module folder here.

\Magento\Framework\Component\ComponentRegistrar::register(
    		\Magento\Framework\Component\ComponentRegistrar::MODULE,
    		'Magento_Search',
    	__DIR__
);

• And when creating the module folder, you need to add the Magento_Search / web / js directory structure.

Initializing the module specific JS
To use the created js, first you need to initialize it.
For example below, we name the file search-model.js

require(['jquery', 'espl-knockout.js'], function($){
    $(function(){
        $('[data-remodal-id=modal]').remodal();
    });
});

Here you can see, we initialize espl-knockout.js.

Conclusion:

Now you know how to integrate third party plugins and libraries in Magento 2. However, this tutorial is bit difficult to implement, so if you can’t do it well, then you may ask for help. Hopefully this tutorial is helpful for you.