javascript - 使用 requireJS 优化器保留 highcharts 的 jQuery 依赖性

Question

我正在测试 requireJS 并尝试使用 highcharts 制作一个简单的项目。我从 requireJS multipage example project 开始作为起点。

我的目录结构看起来与基本结构相同，只是在 lib 目录中添加了 highstock.js。

• page1.html:应用的第 1 页。
• page2.html:应用的第 2 页。
• js
  • app:存储应用程序特定模块的目录。
  • lib:保存第三方模块的目录，例如 jQuery。
  • common.js:包含 requirejs 配置，它将是构建一组通用模块的目标。
  • page1.js:用于 page1.html 的数据主体。加载通用的模块，然后加载 app/main1，页面 1 的主模块。
  • page2.js:用于 page2.html 的数据主体。加载通用的module，然后加载 app/main2，页面 2 的主模块。

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 文件和配置文件中尝试了多个选项，但似乎缺少一些关键概念或小错误。

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

Answer 1

请看一下使用 require js 的非常简单的示例 http://jsfiddle.net/wAM3h/

    require({
    paths: {
        jquery: "//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min",
        hchart: [
            "http://code.highcharts.com/highcharts",
            "http://code.highcharts.com/highcharts-more",
            "http://code.highcharts.com/modules/exporting"
        ]
    }
},
['jquery', 'hchart'], function($, hc) {

    window.chart = new Highcharts.Chart(options);
    });