javascript - 将 Highcharts 与 Curljs 集成的最佳方式是什么？

Question

背景

我正在寻找一种替代当前技术的方法，用于通过我的curljs 模块加载highcharts.js。目前我正在以这种方式加载所需的库:

define("Test", ["jquery",
    "js!https://code.highcharts.com/highcharts",
    "js!https://code.highcharts.com/highcharts-more",
    "js!https://code.highcharts.com/modules/exporting"],

function ($, hchart, hchartmore, hchartexp) {
    var testFunc = function () {
        return {
            markup: function () {
                $("#mixer").html("did it");
            },
            chartIt: function () {
                window.chart = new Highcharts.Chart({

               // do the highchart configs});
    };


    return testFunc;
});

目前此方法有效，您可以引用我的 jsfiddle demoing my current solution .

我尝试使用 js! 插件填充 Highchart，并按照curl 文档的指定创建一个curl 配置对象:

curl = {
    baseUrl: "",
    paths: {
        "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js",
        "hchart": "js!https://code.highcharts.com/highcharts",
        "hchartmore":"js!https://code.highcharts.com/highcharts-more",
        "hchartmore":"js!https://code.highcharts.com/modules/exporting"}
}; 

但是当curl 尝试读取 highchart.js 文件时，我收到“define() 丢失或重复”错误。

那么我的问题是，即使我的解决方案有效，它是否合适？有替代方案吗？

Answer 1

尝试使用curl.js 的旧版加载器。它非常适合全局脚本，例如 highcharts。

var hchartBase = "https://code.highcharts.com/";
var hchartCfg = {
    loader: "curl/loader/legacy",
    exports: "Highcharts"
};
curl.config({
    baseUrl: "",
    paths: {
        "curl": "your/path/to/curl/curl.js",
        "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js",
        "hchart": { location: hchartBase + "highcharts", config: hchartCfg },
        "hchartmore": { location: hchartBase + "highcharts-more", config: hchartCfg },
        "hchartexp": { location: hchartBase + "modules/exporting", config: hchartCfg }
    }
});

请注意，我包含了一个 curl 路径。这是curl 查找旧版加载程序所必需的。

通常情况下，您不会对所有三个库使用相同的旧配置，但由于我无法判断 highcharts-more 和导出库是否未声明curl 可以代表您导出的任何有用的全局变量，所以我只是对所有三个使用相同的配置。

更多信息在这里:https://github.com/cujojs/curl/tree/master/src/curl/loader