使用 requireJS 优化器为 highcharts 保留 jQuery 依赖项答案

【问题标题】：Preserving jQuery dependency for highcharts with requireJS optimizer使用 requireJS 优化器为 highcharts 保留 jQuery 依赖项
【发布时间】：2013-03-28 01:53:34
【问题描述】：

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

我的 dir 结构看起来与基本结构相同，在 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 的主数据。加载公共模块，然后加载页面 2 的主模块 app/main2。

common.js 保存了配置，我在那里为 highstock 添加了一个 shim：

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 尚未加载/不可访问。

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

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

【问题讨论】：

在您作为起点链接的页面上有一个免责声明：“如果您想使用 shim 配置，例如加载 Backbone，请参阅 requirejs/example-multipage-shim 示例。此项目不适用于 shim 配置。当所有依赖项都是 AMD 模块时，此项目效果最佳。 github.com/requirejs/example-multipage-shim你看到了吗？
不，错过了。我去看看谢谢！

标签： javascript highcharts requirejs shim

【解决方案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);
    });

【讨论】：

我没有使用CDN，它在非优化状态下工作得很好。感谢您抽出宝贵时间回答，但这并不能真正解决我的问题。

【解决方案2】：

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

我看到您没有在上面的代码中将path 定义为highcharts 库。即使在你提到的 repo 中我也看不到它。

同样，highcharts 阻止重新声明此命名空间，因此您必须使用不同的名称 - 因此，在填充时必须使用不同的名称

注意：highcharts 之类的库可以安全地在 amd 模块中使用，而无需使用 shim（除非您需要显式访问由它导出的对象）。

所以，您的 配置文件 应该如下所示：

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

【讨论】：