Loading old libraries to Requirejs

Asked

Viewed 229 times

5

What’s the best way to set up old libraries that weren’t built using the AMD specification? I refer to libraries that have not been defined with instruction defines(). In this case, I am trying to load the Jquery library 1.4.

I read on the website of Requirejs on the use of the attribute Shim, I made a copy of the example on github and ran normally, however I could not make my own example based on the previous.

I have the following files: 

aplicacao/index.html
aplicacao/js/main.js
aplicacao/js/app/app.js
aplicacao/js/lib/require.js
aplicacao/js/lib/jquery-1.4.2.min.js

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Testando JQuery + RequireJS</title>
        <script data-main="js/main" src="js/lib/require.js"></script>
    </head>
    <body>
        <h1>jQuery 1.4 + RequireJS</h1>
    </body>
</html>

js/main.js

requirejs.config({
    "paths": {
      "jquery": "lib/jquery-1.4.2.min"      
    },
    "shim": {
        "jquery" : "jquery"
    }
});


requirejs(["app/app"], function(app){
    console.log(app); //imprime o objeto definido em js/app/app.js
});

js/app/app.js

define(["jquery"], function(jotaquery) {
    console.log('carregou app ', jotaquery); //não carrega a dependência criada em js/main.js
    console.log(jotaquery); //imprime undefined
    return {
        metodoUm : function() {
          //código aqui
        },
        metodoDois : function() {
          //código aqui 
        }   
    }
});

UPDATED

To make it clearer, I will put here a simple example to better illustrate my need.

Given the file dialogo.js, implemented without compliance with the AMD specification (without the use of the define()):

var Dialogo = (function() {
    function exibirAlerta(msg) {
        alert(msg);
    }
    function exibirConfirmacao(msg, callback) {
        if (confirmacao(msg, callback)) {
            if (typeof callback === "function") {
                callback.call();
            }
        }
    }
    return {
        exibirAlerta : exibirAlerta,
        exibirConfirmacao : exibirConfirmacao
    };
})();

How to load this dependency since it loads the file dialogo.js, but the variable Dialogue is not available for handling?

require(["dialogo"], function(Dialogo){
    console.log(Dialogo);//undefined
});

If you implement the library dialogo.js according to the AMD standard, as it is in the code below, the previous instruction prints the object Dialogue correctly: Object {exibirAlerta: function, exibirConfirmacao: function}.

define(function(){
    function exibirAlerta(msg) {
        alert("DIALOG ALERTA: " + msg);
    }

    function exibirConfirmacao(msg, callback) {
        if (confirmacao(msg, callback)) {
            if (typeof callback === "function") {
                callback.call();
            }
        }
    }

    return {
        exibirAlerta : exibirAlerta,
        exibirConfirmacao : exibirConfirmacao
    };
});
javascript requirejs amd

1 answer

1


I don’t know much about Requirejs but there’s my attempt to help:

Are you sure the jquery JS is not loaded, or is it just the variable that gets Undefined? Try to enable the jquery log Xmlhttprequest in the browser of your choice, and check whether the file JS is actually being loaded. Also, some script error occurs?

If it does not occur and if the problem is even the variable being Undefined, I think the solution is simple, just replace 

"shim": {
    "jquery" : "jquery"
}

for 

"shim": {
    "jquery" : {
        exports: 'jQuery'
    }
}

Another detail, I had to exchange 'jquery' for 'jQuery'.

Since jquery 1.4 was not built according to AMD, you should define Shim what is the object to be exported. I took it from here: http://requirejs.org/docs/api.html#config-Shim

I made a mini-example - gambiarra because I had to play a gist in separate file and to using 2 files instead of 3, but I think it can be useful to show the code working:

https://jsfiddle.net/hf1z3srz/1/

And gist (equals app.js):

https://gist.githubusercontent.com/anonymous/d3b769de58a1b88a8245/raw/31b914ce8abee02174b99c97558e74dd48f3cd62/jotaquery.js

If it doesn’t help you, let me know in the comments that I change the answer accordingly.

EDIT: I also changed from "define" to "require," I believe that’s what you wanted to write, right? Let me know if I’m wrong.

EDIT 2

Fiddle from the example of Dialogo: https://jsfiddle.net/6yh2LL63/

Link to the dialog.js: https://cdn.rawgit.com/anonymous/9e1ffe3d76324bd15840/raw/6c5ebe4c1489dd6a484b040384cc36830fdae399/dialogo.js

In short, the configuration was like this:

requirejs.config({
    "paths": {
        "dialogo": "https://cdn.rawgit.com/anonymous/9e1ffe3d76324bd15840/raw/6c5ebe4c1489dd6a484b040384cc36830fdae399/dialogo.js"      
    },
    "shim": {
        dialogo: {
            exports: 'Dialogo'
        }
    }
});

And the code that uses the require:

requirejs(["dialogo"], function(Dialogo){
    console.log(Dialogo); //imprime o objeto dialogo
});

See that I specified in Exports the object 'Dialogo'. As far as I understand it, we have to do this because since js is not in the AMD standard, it is possible to identify which object should come in return.

If you look at the console you will see that we have the object with its methods:

inserir a descrição da imagem aqui

  • Hello, Conrad. The file is actually loaded, however the jQuery object I need to handle is not available within the scope of my module. I will edit the question by putting a more practical example for you to understand and so be able to help.

  • Conrad, I edited my question by putting a simpler example. If you can answer based on this example thank you.

  • @Geisonsantos Ok, I updated the answer. See if it solves your problem.

  • Conrad, perfect. It worked fine. Thanks!

Browser other questions tagged javascript requirejs amd

You are not signed in. Login or sign up in order to post.