How to handle two set of library's in your front end project?

问题

I am having Angular 1.x/jQuery project where I have already loaded all front end library like jQuery.js, require.js,angular.js. Now I am planning to integrate with Madcap Documentation libraries. They are giving another set of same front-end jQuery/require js library which is a different version than the existing version of my project. How can I load the new madcap library without conflicting the existing UX library?

We have a angular-summernote on our project which throws error like

TypeError: element.summernote is not a function.

i tried jquery noConflict option like below and it doesn't work :( Any other option to try out to load the libraries?

<html>
<head>
      <script src="./assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
    <script> 
    $.noConflict(true);
                 var jq = jQuery;
                 jq(document).ready(function($){        
                    jq.ajax({
                        url: '/login',
                        type: 'PUT',
                        success: function (response) {
    
                            var url = "app.min.js?v=" + response.clientGitHash;
                            jq.ajax({
                                url: url,
                                type: 'GET',
                                dataType: 'script',
                                cache: true,
                                success: function (data, textStatus, jqxhr) {
                                    console.log("Successfully Loaded.");                   
                                    //i want to enforce the below getscript use only the default loaded jquery and not having conflict with further loading library.
                                    jq.getScript("scripts/summernote-bs4.min.js", function(data2, textStatus2, jqxhr2) {  
                                        console.log("Loading SummerNote ");
                                    });
                                }
                            });
                        }
                    });
                });
    </script>
    
    
     <script src="scripts/helpDoc/Default.js"></script>  // This is a vendor file from madcap which loads it versions of jquery, requiresjs etc.
    </script>
    </body>
    </html>

来源：https://stackoverflow.com/questions/63642201/how-to-handle-two-set-of-librarys-in-your-front-end-project

标签

javascript

jquery

angularjs

module

madcap