Javascript 使用requireJS优化器为highcharts保留jQuery依赖关系
我正在测试requireJS,并尝试使用highcharts制作一个简单的项目。我已经开始把它作为一个起点 My dir结构看起来与基本结构相同,在lib目录中添加了highstock.jsJavascript 使用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的主数据。
- 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
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
}
}
});