Caricamento Highcharts tramite shim utilizzando RequireJS e mantenimento della dipendenza jQuery

Question

Sto tentando di caricare la libreria Highcharts utilizzando uno shim in RequireJS. Tuttavia, quando carica Highcharts, genera un'eccezione perché non può accedere ai metodi jQuery da cui dipende.

L'richiedono configurazione assomiglia così:

require.config({ 
    baseUrl: "js", 

    shim: { 

     'libs/highcharts/highcharts.src.js': { 
      deps: ['jquery'], 
      exports: function(jQuery) 
      { 
       this.HighchartsAdapter = jQuery; 

       return this.Highcharts; 
      } 
     } 
    } 
}); 

L'eccezione che viene generata è:

Uncaught TypeError: undefined is not a function 

ed è con riferimento a questa linea:

dataLabels: merge(defaultLabelOptions, { 

La questione è la chiamata merge, che alla fine si associa a jQuery (o qualche altro adattatore che Highch supporti artistici; ma sto usando solo jQuery).

Non sono sicuro di come assicurarsi che Highcharts abbia accesso a jQuery utilizzando RequireJS e shim.

Qualcuno ha mai utilizzato RequireJS e Highcharts in precedenza? Immagino che il problema non sia specifico per i grafici highcharts, ma qualsiasi libreria che abbia altri tipi di dipendenze.

Grazie in anticipo per qualsiasi consiglio o punto nella direzione corretta!

Per aggiungere ulteriore contesto, nella speranza che qualcuno che abbia familiarità con require.js o spessori sarà in grado di aiutare, senza dover essere troppo intimamente familiare con Highcharts, ecco qualche fonte che imposta questo metodo merge in Highcharts

var globalAdapter = win.HighchartsAdapter, 
adapter = globalAdapter || {}, 

// Utility functions. If the HighchartsAdapter is not defined, 
// adapter is an empty object 
// and all the utility functions will be null. In that case they are 
// populated by the 
// default adapters below. 

// {snipped code} 

merge = adapter.merge 

// {snipped code} 

if (!globalAdapter && win.jQuery) { 
    var jQ = win.jQuery; 

    // {snipped code} 

    merge = function() { 
     var args = arguments; 
     return jQ.extend(true, null, args[0], args[1], args[2], args[3]); 
    }; 

    // {snipped code} 
} 

l'oggetto win è un riferimento istituito per window all'inizio dello script. Quindi, pensavo che l'aggiunta di window.jQuery = jQuery; al metodo di esportazione sullo shim avrebbe comportato l'estrazione dei riferimenti jQuery da diagrammi elevati; ma non è stato così.

Ancora una volta, qualsiasi intuizione, informazioni, consigli o suggerimenti sarebbero apprezzati a questo punto - Sono completamente a corto di perdite e comincio a chiedermi se valga la pena provare a implementare e il sistema di pacchetti AMD nel browser javascript.

---

Dopo aver accettato la risposta da pabera seguito ho ritenuto opportuno aggiornare la mia domanda a riflettere su come la sua risposta ha aiutato la mia soluzione (anche se, è fondamentalmente la sua risposta).

RequireJS utilizza "percorsi" per trovare librerie che non sono supportate da "AMD" e le carica nella pagina. l'oggetto "shim" consente di definire le dipendenze per le librerie definite nei percorsi. Le dipendenze devono essere caricate prima che requirejs proverà a caricare lo script dipendente.

La proprietà exports fornisce un meccanismo per indicare a requirejs come determinare se la libreria è stata caricata. Per librerie di base, come jQuery, spina dorsale, socketio, ecc tutti esportano una parte variabile livello di finestra (Backbone, io, jQuery e $, ecc). Fornisci semplicemente tale nome di variabile come proprietà exports e requirejs sarà in grado di determinare quando viene caricata la lib.

Una volta terminate le definizioni, è possibile utilizzare la funzione requirejs 'define come previsto.

Ecco il mio esempio require.config oggetto:

require.config({ 
    baseUrl: "/js/", 

    paths: { 
     jquery: 'jquery', 
     socketio: 'http://localhost:8000/socket.io/socket.io', //for loading the socket.io client library 
     highcharts: 'libs/highcharts/highcharts.src', 
     underscore: 'libs/underscore', 
     backbone: 'libs/backbone' 
    }, 

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

     socketio: { 
      exports: 'io' 
     }, 

     underscore: { 
      exports: '_' 
     }, 

     backbone: { 
      deps: ['jquery', 'underscore'], 
      exports: 'Backbone' 
     }, 

     highcharts: { 
      deps: ['jquery'], 
      exports: 'Highcharts' 
     } 
    } 
}); 

Come pabera accennato prima, questo è per la versione Require.JS2.0.1.

Spero che qualcuno ne approfitti; So che la strada mi ha bloccato per un po '; quindi spero che ti abbiamo impedito di sbattere la testa nello stesso punto nel muro che abbiamo fatto, postando questo.

Answer 1

ho avuto lo stesso identico problema e stavo lottando in giro molte ore fino a quando ho visto il tuo ingresso Qui. Poi ho ricominciato da zero e ora funziona almeno per me.

requirejs.config({ 
    baseUrl:'/js/', 
    paths:{ 
     jquery:'vendor/jquery', 
     handlebars: 'vendor/handlebars', 
     text: 'vendor/require-text', 
     chaplin:'vendor/chaplin', 
     underscore:'vendor/underscore', 
     backbone:'vendor/backbone', 
     highcharts: 'vendor/highcharts' 
    }, 

    shim: { 
     backbone: { 
     deps: ['underscore', 'jquery'], 
     exports: 'Backbone' 
     }, 
     underscore: { 
     exports: '_' 
     },  
     highcharts: { 
     exports: 'Highcharts' 
     }  
    }, 
}); 

Da quando uso Chaplin in cima Backbone, sto tra cui alcuni più file in attribuiscono miei sentieri. Highcharts ha una struttura simile a Backbone quindi ho pensato di poterlo caricare allo stesso modo. Funziona per me ora. Come puoi vedere, sto introducendo i grafici ad alta risoluzione nell'attributo path già per esportarlo come shim afterwords.

Forse questo aiuta, altrimenti proviamo a contribuire ancora di più per risolvere il tuo problema.

Answer 2

Anche se jQuery può essere utilizzato come modulo di AMD sarà ancora in sé l'esportazione verso la finestra in ogni caso in modo che qualsiasi script a seconda del mondiale jQuery o $ continuerà a funzionare finché jQuery è stato caricato prima.

Hai provato a impostare un percorso? jQuery è interessante perché sebbene tu sia incantato a non nominare i tuoi moduli con la documentazione di RequireJS, jQuery in effetti lo fa.

Dalla sorgente di jQuery

if (typeof define === "function" && define.amd && define.amd.jQuery) { 
    define("jquery", [], function() { return jQuery; }); 
} 

Ciò significa dovrete dire RequireJS dove trovare 'jQuery'. Quindi:

require.config({ 
    paths: { 
     'jquery': 'path/to/jquery' 
    } 
}); 

Se siete interessati a perché jQuery si registra in questo modo, allora there is a pretty large comment in the source che va più nel dettaglio