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.Cargando Highcharts vía cuña utilizando RequireJS jQuery y el mantenimiento de la dependencia
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.
Voy a dar una oportunidad y ver qué se me ocurre; ¡Gracias por la respuesta! –
Uso 'require.js 2.0.1', por si acaso es importante. Buena suerte – pabera
He cambiado para usar el require.js normal (en lugar de w/jquery) y usé el jquery shim, con su explicación/ejemplo de paths/shims. después de leer la documentación un poco más, ahora entiendo lo que está pasando, ¡muchísimas gracias! –