javascript - paths - Cargando Highcharts a través de shim usando RequireJS y manteniendo la dependencia de jQuery

requirejs paths cdn

Question

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

La configuración requerida se ve así:

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 lanza es:

Uncaught TypeError: undefined is not a function

y es en lo que respecta a esta línea:

dataLabels: merge(defaultLabelOptions, {

El problema es la llamada de merge , que finalmente se asigna de nuevo a jQuery (o algún otro adaptador compatible con Highcharts; pero solo estoy usando jQuery).

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

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

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

Para agregar más contexto, con la esperanza de que alguien que esté familiarizado con require.js o shims pueda ayudar sin tener que estar demasiado familiarizado con Highcharts, aquí hay algunas fuentes que configuran este método de 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 configurada para window al principio del script. Entonces, pensé en agregar window.jQuery = jQuery; al método de exportación en la cuña daría lugar a que los gráficos altos seleccionen la referencia jQuery; pero no lo hizo

Una vez más, cualquier información, información, consejo u obstáculos serían apreciados en este momento; estoy completamente perdido y empezar a cuestionarme si intentar implementar y el sistema de paquetes AMD en el navegador javascript vale la pena.

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

RequireJS usa "rutas" para encontrar libretas que no son compatibles con "AMD" y las carga en su página. el objeto "shim" le permite definir dependencias para las bibliotecas definidas en las rutas. Las dependencias se deben cargar antes de que requirejs intente cargar el script dependiente.

La propiedad de exportaciones proporciona un mecanismo para indicar a requirejs cómo determinar si la biblioteca está cargada. Para las librerías 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 propiedad de exports , y requirejs podrá determinar cuándo se carga la biblioteca.

Una vez que haya finalizado sus definiciones, puede usar la función define requirejs 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 se mencionó anteriormente, esto es para Require.JS versión 2.0.1 .

Espero que alguien haga uso de esto; Sé que la carretera me bloqueó por un rato; así que, con suerte, evitamos que te golpees la cabeza en el mismo lugar en el muro que hicimos, publicando esto.

Answer 1

Aunque jQuery se puede usar como un módulo AMD, de todos modos se exportará a sí mismo a la ventana, por lo que cualquier secuencia de comandos que dependa de jQuery o $ global seguirá funcionando siempre que jQuery se haya cargado primero.

¿Has intentado establecer un camino? jQuery es interesante porque, a pesar de que la documentación de RequireJS no le permite nombrar los módulos, jQuery sí lo hace.

De la fuente jQuery

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

Lo que eso significa es que tendrá que decirle a RequireJS dónde encontrar ''jquery''. Asi que:

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

Si está interesado en saber por qué jQuery se registra de esta manera, hay un comentario bastante grande en la fuente que detalla más detalladamente.

Answer 2

Tuve el mismo problema y estuve luchando por muchas horas hasta que vi tu entrada aquí. Entonces empecé de cero y ahora funciona para mí al menos.

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 sobre Backbone, estoy incluyendo algunos archivos más en el atributo de mi ruta. Highcharts tiene una estructura similar a Backbone, así que pensé que podría cargarla de la misma manera. Funciona para mi ahora. Como puede ver, ya estoy introduciendo highcharts en el atributo de rutas para exportarlo como una copia de seguridad posterior.

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