Question

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

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

page1.html ：该应用的第1页。
page2.html ：该应用的第2页。
的 JS
- 应用：存储应用专用模块的目录。
- lib ：保存第三方模块的目录，如jQuery。
- common.js ：包含requirejs配置，它将是构建版本公共模块集的目标。
- page1.js ：用于page1.html的data-main。加载共同点模块，然后加载 app / main1 ，第1页的主要模块。
- page2.js ：用于page2.html的data-main。加载共同点模块，然后加载 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

因此，在加载了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);
    });

Answer 2

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

我发现您在上面的代码中没有为path库定义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
        }
    }
});

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

2 个答案: