1

我正在测试 requireJS 并尝试使用 highcharts 制作一个简单的项目。我以requireJS 多页示例项目作为起点。

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

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

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

4

2 回答 2

0

请看一个非常简单的例子，它使用需要 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);
    });
于 2013-03-28T12:08:08.770 回答
0

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

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

并且，再次，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
        }
    }
});
于 2015-11-29T17:59:55.217 回答