5

Qual a melhor forma de configurar bibliotecas antigas que não foram construídas usando a especificação AMD? Refiro-me as bibliotecas que não foram definidas com a instrução define(). No caso, estou tentando carregar a biblioteca JQuery 1.4.

Li no site do RequireJS sobre o uso do atributo shim, fiz a cópia do exemplo no github e executei normalmente, contudo não consegui fazer meu próprio exemplo com base no anterior.

Tenho os seguintes arquivos:

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 
        }   
    }
});

ATUALIZADO

Para deixar mais claro, vou colocar aqui um exemplo simples para ilustrar melhor minha necessidade.

Dado o arquivo dialogo.js, implementado sem conformidade com a especificação AMD (sem o uso do 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
    };
})();

Como fazer para carregar essa dependência visto que ele carrega o arquivo dialogo.js, mas a variável Dialogo não fica disponível para manipulação?

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

Se implementar a biblioteca dialogo.js segundo o padrão AMD, como está no código abaixo, a instrução anterior imprime o objeto Dialogo corretamente: 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
    };
});

1 Resposta 1

1
+100

Não manjo muito de RequireJS mas taí minha tentativa de ajudar:

Você tem certeza que o JS do jquery não é carregado, ou é só a variável que fica undefined? Tenta ativar o log de XmlHttpRequest no navegador de sua escolha, e verifique se o arquivo JS está sendo de fato carregado. Além disso, ocorre algum erro de script?

Se não ocorre e se o problema é mesmo a variável estar undefined, acho que a solução é simples, basta substituir

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

por

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

Outro detalhe, tive que trocar 'jquery' por 'jQuery'.

Já que o jquery 1.4 não foi construído segundo o AMD, vc deve definir no shim qual é o objeto a ser exportado. Tirei isso daqui: http://requirejs.org/docs/api.html#config-shim

Fiz um mini-exemplo - gambiarra porque tive que jogar um gist em arquivo separado e to usando 2 arquivos ao invés de 3, mas acho que pode ser útil pra mostrar o código funcionando:

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

E o gist (equivale ao app.js):

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

Se isso não te ajudar, me avise nos comentários que eu altero a resposta de acordo.

EDIT: Também alterei de "define" para "require", acredito que tenha sido isso que vc quis escrever, certo? Me avise se eu estiver errado.


EDIT 2

Fiddle do exemplo do Dialogo: https://jsfiddle.net/6yh2LL63/

Link para o dialogo.js: https://cdn.rawgit.com/anonymous/9e1ffe3d76324bd15840/raw/6c5ebe4c1489dd6a484b040384cc36830fdae399/dialogo.js

Resumindo, a configuração ficou assim:

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

E o código que usa o require:

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

Veja que eu especifiquei no exports o objeto 'Dialogo'. Até onde entendi, temos que fazer isso porque como o js não está no padrão AMD, seja possível identificar qual objeto deve vir no retorno.

Se observar o console vai ver que temos o objeto com os respectivos métodos:

inserir a descrição da imagem aqui

4
  • Olá, Conrad. O arquivo de fato é carregado, contudo o objeto jQuery que eu preciso manipular não fica disponível dentro do escopo do meu módulo. Eu vou editar a pergunta colocando um exemplo mais prático para você entender e assim poder ajudar. Commented 6/03/2015 às 21:16
  • Conrad, editei a minha pergunta colocando um exemplo mais simples. Se você puder responder com base nesse exemplo agradeço. Commented 6/03/2015 às 21:56
  • @GeisonSantos Ok, atualizei a resposta. Veja se resolve o teu problema. Commented 6/03/2015 às 22:25
  • Conrad, perfeito. Funcionou direitinho. Valeu! Commented 7/03/2015 às 2:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .