Cargando Highcharts vía cuña utilizando RequireJS jQuery y el mantenimiento de la dependencia

Question

Estoy intentando cargar la biblioteca Highcharts usando una cuña en RequireJS. Sin embargo, cuando se carga Highcharts, arroja una excepción porque no puede acceder a los métodos de jQuery de los que depende.

El requieren de configuración es de esta manera:

require.config({ 
    baseUrl: "js", 

    shim: { 

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

       return this.Highcharts; 
      } 
     } 
    } 
}); 

La excepción que se produce es:

Uncaught TypeError: undefined is not a function 

y está en lo que respecta a esta línea:

dataLabels: merge(defaultLabelOptions, { 

La cuestión es la llamada merge, que finalmente se asigna a jQuery (o algún otro adaptador que Highch) soportes artísticos; pero solo estoy usando jQuery).

No estoy seguro de cómo asegurarse de que Highcharts obtenga acceso a jQuery utilizando RequireJS y shim.

¿Alguien ha usado antes RequireJS y Highcharts juntos? Supongo que el problema no es específico de los Highcharts, sino de cualquier biblioteca que tenga otro tipo de dependencias.

Gracias de antemano por cualquier consejo o punto a la dirección correcta!

Para añadir más contexto, con la esperanza de que alguien que esté familiarizado con require.js o cuñas será capaz de ayudar sin tener que ser demasiado íntimamente familiarizado con Highcharts, aquí hay alguna fuente que pone en marcha este método merge en 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} 
} 

el objeto win es una referencia establecido para window al comienzo de la secuencia de comandos. Por lo tanto, pensé que agregar window.jQuery = jQuery; al método de exportación en el shim daría lugar a que los gráficos altos recogieran la referencia de jQuery; pero no fue así

De nuevo, cualquier idea, información, consejo o acritud sería apreciada en este punto - Estoy en una pérdida completa, y comenzando a preguntar si intentar implementar y el sistema de paquete AMD en el navegador JavaScript vale la pena.

---

Después de aceptar la respuesta de pabera continuación pensé conveniente actualizar mi pregunta para reflejar cómo su respuesta ayudó a mi solución (aunque, es básicamente su respuesta).

RequireJS utiliza "caminos" para encontrar librerías que no son "AMD" apoyo y los carga en su página. el objeto "shim" le permite definir dependencias para las bibliotecas definidas en las rutas. Las dependencias deben cargarse antes de que requirejs intente cargar el script dependiente.

La propiedad exportaciones proporciona un mecanismo para contar RequireJS cómo determinar si se carga la biblioteca. Para bibliotecas básicas como jquery, backbone, socketio, etc. todas exportan alguna variable de nivel de ventana (Backbone, io, jQuery y $, etc.). Simplemente proporcione ese nombre de variable como la propiedad exports, y requirejs podrá determinar cuándo se carga la lib.

Una vez que haya completado sus definiciones, puede usar requirejs 'define funcionan como se esperaba.

Aquí está mi ejemplo require.config objeto:

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

Como pabera se mencionó antes, esto es para Require.JS versión 2.0.1.

Espero que alguien se beneficie de esto; Sé que el camino me bloqueó por un tiempo; así que espero evitar que golpee su cabeza en el mismo lugar en la pared que lo hicimos, al publicar esto.

Answer 1

que tenía el mismo problema y he tenido problemas en torno a muchas horas hasta que vi su entrada aquí. Luego comencé de cero y ahora funciona al menos para mí.

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

Desde que uso Chaplin en la parte superior de la espina dorsal, estoy incluyendo algunos archivos más en atribuyen mis caminos. Highcharts tiene una estructura similar a Backbone, así que pensé que podría cargarlo de la misma manera. Funciona para mi ahora. Como puede ver, estoy introduciendo Highcharts en el atributo paths ya para exportarlo como un afterwords shim.

Tal vez esto ayude, de lo contrario vamos a tratar de contribuir aún más para resolver su problema.

Answer 2

Aunque jQuery se puede utilizar como un módulo AMD, se exportará a la ventana de todos modos, por lo que cualquier secuencia de comandos según jQuery o $ global seguirá funcionando siempre que jQuery se haya cargado primero.

¿Has intentado establecer un camino? jQuery es interesante porque, aunque está convencido de no nombrar sus módulos por la documentación de RequireJS, jQuery sí lo hace.

Desde la fuente jQuery

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

Lo que esto significa es que usted va a necesitar decirle RequireJS dónde encontrar 'jquery'. Por lo tanto:

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

Si está interesado en saber por qué jQuery registra a sí mismo de esta manera entonces there is a pretty large comment in the source, que entra en más detalles