lundi 27 juin 2016

How to include a multi-anonymous function JS library with RequireJS?


This is my first time using RequireJs and I'm running into a problem today I havent been able to solve (maybe I just dont know what am I doing), and I've tried many many things before posting here.

I have this old 3rd-party (PayPal) JS library which I can't seem to properly include via RequireJS (I get errors like "Legalize is not defined", so I suppose is maybe a jQuery conflict problem or the Library itlesf not loading properly so global variables dont get exposed).

Note: Library works normally on an isolated environment where only this script is includ via HEAD html tag. Using Magento 2 and RequireJS with other dependencies brings the problem up.

I've tried with no luck loading the library by wrapping the whole thing within a

define(['paypal'], function(){...library code...});

The library structure is as follows:

Note: It's using a deprecated jquery version, and jquery cookie version too.

! function() {
    /*!
     * jQuery JavaScript Library v1.10.2 -deprecated
     * http://jquery.com/
     *
     * Includes Sizzle.js
     * http://sizzlejs.com/
     *
     * Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors
     * Released under the MIT license
     * http://jquery.org/license
     *
     * Date: 2013-07-07T16:53Z
     */
     ! function(a, b){...3,251 lines...}(window),
    /*!
     * jQuery Cookie Plugin v1.4.1
     * https://github.com/carhartl/jquery-cookie
     *
     * Copyright 2013 Klaus Hartl
     * Released under the MIT license
     */  
     function(a){...jquery cookie code...}(function(a) {...more code...}),
     function(a){...more code...}(jQuery),
     function(a){...more code...}(jQuery),
     function(a){...more code...}(jQuery),
     function(a){
        "use strict";
        "function" == typeof define && define.amd ? define("Legalize", a) : window.Legalize = a()
     }(function(a){...more code..})
}();
/**
 * END OF ANONYMOUS FUNCTION
 */
var PAYPAL = PAYPAL || {};
PAYPAL.apps = PAYPAL.apps || {}, PAYPAL.apps.PPP = function(a, b, c, d){
..  LIBRARY CODE....
}(window, jQuery, Legalize);

Im loading the library file (ppplus.js) like this:

define(
[
    '/js/ppplus'
],
function (
    plus
) {
    'use strict';
     console.log(plus);

}

);

Which returns me a "undefined" in the console, and errors like "Legalize is not defined" when I try to call the PAYPAL object defined at the end of the library.

What is the sugggestion here ? decouple librarie's functions into separate RequireJs modules ? The Library seems to depend on an old jQuery version, and my web app is using the newest. What is the best approach here ?

Thanks ! Any help is well appreciated.

Have a nice one!


Aucun commentaire:

Enregistrer un commentaire