What is the best way to configure old libraries that were not built using the AMD specification? I am referring to libraries that were not defined with the define () statement. In this case, I'm trying to load the JQuery 1.4 library.
I read on the RequireJS site about using the shim attribute, I made the copy of the example in github and executed normally, however I could not make my own example based on the previous one.
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, here's a simple example to better illustrate my need.
Given the dialogo.js file, implemented without AMD specification (without the use of 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 do I load this dependency as it loads the dialogo.js file, but the Dialog variable is not available for manipulation?
require(["dialogo"], function(Dialogo){
console.log(Dialogo);//undefined
});
If you implement the dialogo.js library according to the AMD standard, as in the code below, the previous statement prints the Dialog object 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
};
});
