Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/369.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用requireJS优化器为highcharts保留jQuery依赖关系_Javascript_Highcharts_Requirejs_Shim - Fatal编程技术网

Javascript 使用requireJS优化器为highcharts保留jQuery依赖关系

Javascript 使用requireJS优化器为highcharts保留jQuery依赖关系,javascript,highcharts,requirejs,shim,Javascript,Highcharts,Requirejs,Shim,我正在测试requireJS,并尝试使用highcharts制作一个简单的项目。我已经开始把它作为一个起点 My dir结构看起来与基本结构相同,在lib目录中添加了highstock.js page1.html:应用程序的第1页 page2.html:应用程序的第2页 js 应用程序:存储应用程序特定模块的目录 lib:存放第三方模块(如jQuery)的目录 common.js:包含requirejs配置,它将成为构建 通用模块集的目标 page1.js:用于page1.html的主数据。

我正在测试requireJS,并尝试使用highcharts制作一个简单的项目。我已经开始把它作为一个起点

My dir结构看起来与基本结构相同,在lib目录中添加了highstock.js

  • page1.html:应用程序的第1页
  • page2.html:应用程序的第2页
  • js
    • 应用程序:存储应用程序特定模块的目录
    • lib:存放第三方模块(如jQuery)的目录
    • common.js:包含requirejs配置,它将成为构建 通用模块集的目标
    • page1.js:用于page1.html的主数据。加载公共文件 模块,然后加载第1页的主模块app/main1
    • page2.js:用于page2.html的主数据。加载公共文件 模块,然后加载第2页的主模块app/main2
common.js保存了配置,我在那里为highstock添加了一个垫片:

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app'
    },
    shim: {
        "highstock": {
            "exports": "Highcharts",
            "deps": [ "jquery"] 
        },
    } // end Shim Configuration
  } );
我还使用基本构建文件,添加了一行将common.js设置为配置文件,另一行禁用缩小

optimize: "none",
mainConfigFile: '../www/js/common.js',
在apps/main1.js中,我添加了一个
var HighCharts=require('highstock')然后我尝试使用它

当我在正常构建中运行时,一切都正常。所有依赖项都有效,所有内容都加载

当我尝试优化构建时,highcharts不会收到jQuery依赖项。我想我明白它为什么会发生,但我不知道如何修复它

我的构建创建了3个文件:common.js、page1.js和page2.js

构建输出的相关部分:

js/lib/../common.js
----------------
js/lib/../common.js
js/lib/jquery.js
...

js/lib/../page1.js
----------------
js/lib/../page1.js
js/lib/highstock.js
js/app/main1.js
...
然后,我的页面引用构建的页面1。当它尝试加载highstock模块时,会出错,因为jQuery尚未加载/无法访问

当我看到构建的页面1时,我就明白了原因

require(['./common'], function (common) {
    require(['app/main1']); //highcharts is in main1 in the non-optimized version
});

define("../page1", function(){});
//a few more defines

(function () { // start highcharts module definition HERE
因此,它不是在加载common(包括jQuery)之后在回调中定义的,而是在发出请求之后但在回调执行之前加载的

我的问题是,为什么会发生这种情况,而不是在回调内部(在非优化版本中加载回调)。我在build.js文件和config文件中尝试了多个选项,但似乎缺少一些关键概念或小错误


很抱歉问了这么长的问题,但我觉得所有的信息都是必要的。如果需要更多信息,我可以发布,或者去掉多余的东西。

请看一个使用require js的非常简单的例子


不确定您是否仍参与该项目:

我发现您没有在上面的代码中定义
高图表
库的
路径
。即使在你提到的回购协议中我也看不到

同样,
highcharts
阻止重新声明此名称空间,因此必须使用其他名称 -因此,在对其进行填充时,必须使用不同的名称

注意:类似于
highcharts
的库可以安全地在amd模块中使用,而无需使用垫片(除非您需要明确访问它导出的对象)

因此,您的配置文件应该如下所示:

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app',
        'highstock-custom-name': 'path/to/highcharts.js'
    },
    shim: {
        "highstock-custom-name": {
          ... //as is, although not necessary
        }
    }
});

在您链接到作为起点的页面上,有一条免责声明:“如果您想使用shim配置,例如加载主干,请参阅requirejs/example multipage shim示例。此项目与shim配置不兼容。当所有依赖项都是AMD模块时,此项目效果最佳。”您看到了吗?没有,没有看到。我来看看谢谢!我没有使用CDN,它在非优化状态下运行良好。我感谢你花时间回答,但这并不是真正解决我的问题。
requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app',
        'highstock-custom-name': 'path/to/highcharts.js'
    },
    shim: {
        "highstock-custom-name": {
          ... //as is, although not necessary
        }
    }
});