使用RequireJS通过填充程序加载Highcharts并保持jQuery依赖性

Question

我正在尝试使用RequireJS中的填充程序加载Highcharts库.但是,当Highcharts加载时,它会抛出异常,因为它无法访问它所依赖的jQuery方法.

require配置如下所示:

require.config({
    baseUrl: "js",

    shim: {

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

                return this.Highcharts;
            }
        }
    }
});

引发的异常是:

Uncaught TypeError: undefined is not a function

并且就这条线而言:

dataLabels: merge(defaultLabelOptions, {

问题是merge调用,最终将自身映射回jQuery(或Highcharts支持的其他适配器;但我只是使用jQuery).

我不确定如何确保Highcharts使用RequireJS和shim访问jQuery.

有没有人之前一起使用过RequireJS和Highcharts？我想问题不是特定于highcharts,而是任何具有其他种类依赖关系的库.

提前感谢任何建议或指向正确的方向!

为了增加更多的上下文,希望熟悉require.js或shims的人能够提供帮助而不必过于熟悉highcharts,这里有一些merge在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}
}

该win对象是window在脚本开头设置的引用.所以,我认为window.jQuery = jQuery;在shim上添加导出方法会导致highcharts获取jQuery引用; 但事实并非如此.

再一次,任何见解,信息,建议或哎呀都会受到赞赏 - 我完全失去了,并开始质疑是否尝试实现和浏览器javascript中的AMD包系统是否值得.

---

在接受了下面pabera的回答后,我认为更新我的问题以反映他的答案如何帮助我的解决方案是合适的(尽管,这基本上是他的答案).

RequireJS使用"路径"来查找不支持"AMD"的库,并将其加载到页面上."shim"对象允许您为路径中定义的库定义依赖项.必须在requirejs尝试加载依赖脚本之前加载依赖项.

exports属性提供了一种机制来告诉requirejs如何确定是否加载了库.对于核心库如jQuery,骨干,socketio,等他们都出口一些窗位变量(Backbone,io,jQuery和$等).您只需将该变量名称作为exports属性提供,并且requirejs将能够确定何时加载lib.

完成定义后,您可以按预期使用requirejs' define功能.

这是我的示例require.config对象:

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

正如pabera之前提到的,这是Require.JS版本2.0.1.

我希望有人能从中得到一些用处; 我知道这条路阻挡了我一会儿; 所以希望我们通过发布这个来阻止你把我的头撞到我们所做的墙上的同一个地方.

Answer 1

我有完全相同的问题,我在很长时间内挣扎,直到我看到你进入这里.然后我从头开始,现在它至少对我有用.

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

由于我在Backbone之上使用Chaplin,因此我在路径属性中包含了更多文件.Highcharts与Backbone有类似的结构,所以我想我可以用同样的方式加载它.它现在对我有用.正如您所看到的,我在paths属性中引入了highcharts,将其导出为shim afterwords.

也许这会有所帮助,否则我们会尝试为此做出更多贡献来解决您的问题.