使用requireJS优化器为高图表保留jQuery依赖性

Question

我正在测试requireJS，并尝试使用highcharts创建一个简单的项目。 我从requireJS多页示例项目开始。

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

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

common.js保存配置，并且我在其中添加了用于高库存的垫片：

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
...

然后，我的页面引用了已构建的page1。 当它尝试加载highstock模块时，由于jQuery尚未加载/无法访问，它会出错。

当我看到构建的page1时，我会明白为什么。

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

因此，与其在公共（包括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);
    });

Answer 2

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

我看到您没有在上面的代码中定义highcharts库的path 。 即使在您提到的回购中，我也看不到它。

同样， highcharts阻止重新声明此命名空间，因此您必须使用其他名称-因此，在highcharts必须使用其他名称

注意：像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
        }
    }
});