javascript - 使用 RequireJS 通过 shim 加载 Highcharts 并维护 jQuery 依赖

Question

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

需要的配置如下所示:

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，这里有一些设置此 合并的源代码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 的答案后，我认为更新我的问题以反射(reflect)他的答案如何帮助我的解决方案是合适的(不过，这基本上是他的答案)。

RequireJS 使用“路径”来查找不支持“AMD”的库并将它们加载到您的页面上。 “shim”对象允许您定义路径中定义的库的依赖关系。必须先加载依赖项，然后 requirejs 才会尝试加载依赖脚本。

exports 属性提供了一种机制来告诉 requirejs 如何确定库是否已加载。对于 jquery、backbone、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'
      }    
    },
});

自从我使用 Chaplin在 Backbone 之上，我在路径属性中包含了更多文件。 Highcharts 的结构与 Backbone 类似，所以我想我可以用同样的方式加载它。现在对我有用。正如您所看到的，我已经在 paths 属性中引入了 highcharts，以便将其导出为垫片后记。

也许这会有所帮助，否则让我们尝试做出更多贡献来解决您的问题。