Kendo Modules 和 RequireJS (r.js) 玩得不好。（加载错误）答案

【问题标题】：Kendo Modules and RequireJS (r.js) not playing nice. (Error on loading)Kendo Modules 和 RequireJS (r.js) 玩得不好。（加载错误）
【发布时间】：2013-06-13 00:06:11
【问题描述】：

我正在使用Kendo UI 版本2013.1.514 和RequireJS（r.js 版本2.1.6）

我的项目在标准 RequireJS 按需加载下完美运行。

但是，当我尝试使用优化器时，不会加载任何剑道。包括它们中的任何一个都会产生著名且令人恼火的Uncaught Error: Mismatched anonymous define() module: 错误。

这是我的配置：

{
    "baseUrl": "../Scripts",
    "name": "../Scripts/js_modules/base_module.js",
    "include": [],
    paths: {
        k: "Frameworks/kendo-2013.1.514-fixed",
        jquery: "Frameworks/jQuery/jquery.min",
        jplugin: "Frameworks/jQuery",
        f: "Frameworks/"
    },
    shim: {
        'jquery.dataSelector': {
            deps: ['jquery'],
            exports: 'jquery.dataSelector'
        },

    },
    "exclude": [],
    "optimize": "none",
    "out": "built-base-modules.js"
}

还有base_module.js

define( function( require ) {

// Don't do anything with them.
// Just define them.

    require("jquery");
    require("k/kendo.core.min");
    //require("k/kendo.userevents.min");
    //require("kendoize/kendoize")
});

我不确定这是否相关，但依赖项跟踪似乎也无法正常工作。（它会成功追踪一层，但不是两层。我曾尝试手动添加core.min 和userevents.min 以查看是否解决了问题。）

有没有人在使用剑道时遇到过这个问题？或者可能是类似的东西？我检查了一堆现有问题，但没有找到与此设置相关的任何内容。

如果需要，我可以发布其他信息，但是详细的 console.log 消息在 require.js 内部的某个地方崩溃了——而不是出现可用的语法错误。

其他信息

页面本身的 HTML/Javascript

    <script src="/Business/Scripts/require.js"></script>

<script>
    (function () {
        "use strict";

        var configObject = {
            shim: {
                'jquery.dataSelector': {
                    deps: ['jquery'],
                    exports: 'jquery.dataSelector'
                },
            },
            baseUrl: "http://760.j6.local:80/Business/Scripts",
                paths: {
                    app: "http://760.j6.local:80/Business",
                    k: "http://760.j6.local:80/Business" + "/Scripts/Frameworks/kendo-2013.1.514",
                    jquery: "http://760.j6.local:80/Business" + "/Scripts/Frameworks/jQuery/jquery.min",
                    jplugin: "http://760.j6.local:80/Business" + "/Scripts/Frameworks/jQuery",
                    f: "http://760.j6.local:80/Business" + "/Scripts/Frameworks/",
                }
            };

            requirejs.config(configObject);
        }());
</script>

    <script src="/Business/_build/built-base-modules.js"></script>

【问题讨论】：

标签： javascript kendo-ui requirejs

【解决方案1】：

我解决了。

虽然 Kendo 确实支持 RequireJS，但它使用 'require' 是一种动态方式，对优化器不太友好。

我的解决方案是编写一个脚本来“解包”脚本，提取所需的依赖项，然后将脚本写入一个新文件。

var kendoFiles = ["kendo.autocomplete.min.js", "kendo.binder.min.js",
  "kendo.calendar.min.js", "kendo.colorpicker.min.js",
  "kendo.columnmenu.min.js", "kendo.combobox.min.js",
  "kendo.core.min.js", "kendo.data.min.js", "kendo.data.odata.min.js",
  "kendo.data.xml.min.js", "kendo.dataviz.chart.min.js",
  "kendo.dataviz.core.min.js", "kendo.dataviz.gauge.min.js",
  "kendo.dataviz.min.js", "kendo.dataviz.sparkline.min.js",
  "kendo.dataviz.stock.min.js", "kendo.dataviz.svg.min.js",
  "kendo.dataviz.themes.min.js", "kendo.dataviz.vml.min.js",
  "kendo.datepicker.min.js", "kendo.datetimepicker.min.js",
  "kendo.draganddrop.min.js", "kendo.dropdownlist.min.js",
  "kendo.editable.min.js", "kendo.editor.min.js",
  "kendo.filtermenu.min.js", "kendo.fx.min.js", "kendo.grid.min.js",
  "kendo.groupable.min.js", "kendo.imagebrowser.min.js",
  "kendo.list.min.js", "kendo.listview.min.js", "kendo.menu.min.js",
  "kendo.mobile.actionsheet.min.js",
  "kendo.mobile.application.min.js", "kendo.mobile.button.min.js",
  "kendo.mobile.buttongroup.min.js", "kendo.mobile.listview.min.js",
  "kendo.mobile.loader.min.js", "kendo.mobile.min.js",
  "kendo.mobile.modalview.min.js", "kendo.mobile.navbar.min.js",
  "kendo.mobile.pane.min.js", "kendo.mobile.popover.min.js",
  "kendo.mobile.scroller.min.js", "kendo.mobile.scrollview.min.js",
  "kendo.mobile.shim.min.js", "kendo.mobile.splitview.min.js",
  "kendo.mobile.switch.min.js", "kendo.mobile.tabstrip.min.js",
  "kendo.mobile.view.min.js", "kendo.multiselect.min.js",
  "kendo.numerictextbox.min.js", "kendo.pager.min.js",
  "kendo.panelbar.min.js", "kendo.popup.min.js",
  "kendo.reorderable.min.js", "kendo.resizable.min.js",
  "kendo.router.min.js", "kendo.selectable.min.js",
  "kendo.slider.min.js", "kendo.sortable.min.js",
  "kendo.splitter.min.js", "kendo.tabstrip.min.js",
  "kendo.timepicker.min.js", "kendo.tooltip.min.js",
  "kendo.touch.min.js", "kendo.treeview.min.js",
  "kendo.upload.min.js", "kendo.userevents.min.js",
  "kendo.validator.min.js", "kendo.view.min.js",
  "kendo.window.min.js"
];

var sourcePath = "../../Scripts/Frameworks/kendo-2013.1.514";
var destPath = "../../Scripts/kendo-rs";


function processFiles() {
  var i = -1;
  var l = kendoFiles.length;

  function nextStep() {
    i++;
    if (i < l) {
      var fileName = kendoFiles[i];
      processOne(fileName, nextStep);
    } else {
      console.log("All finished");
    }
  }
  nextStep();
}

function processOne(fileName, callback) {
  console.log("Processing: " + fileName);

  var fullName = sourcePath + "/" + fileName;
  fs = require('fs');
  fs.readFile(fullName, 'utf8', function (err, data) {
    if (err) {
      console.log(err);
    } else {
      getFileDependencies(fileName, data);
      callback();
    }
  });
}

function saveCode(fileName, code, moduleDependencies) {
  var fs = require('fs');

  var moduleDependenciesString = '"' + moduleDependencies.join('", "') +
    '"';

  var newCode = "define([" + moduleDependenciesString + "]," + "\r\n" +
    code + "\r\n" +
    ");";

  fs.writeFile(destPath + "/" + fileName, newCode, function (err) {
    if (err) {
      console.log(err);
    } else {
      console.log(fileName + " was saved!");
    }
  });
}

function getFileDependencies(fileName, code) {
  // * This is where the magic happens.
  // the kendo modules call define with the dependencies and the function.
  define = function (moduleDependencies, code) {
    for (i = 0; i < moduleDependencies.length; i++) {
      var str = moduleDependencies[i];
      str = str.replace("./", "k/");
      moduleDependencies[i] = str;
    }

    /// OPTIONAL STEP
    /// Set this to your jQuery path.  If you don't include jQuery globally,
    /// you run the risk of a race condition.
    moduleDependencies.push("jquery");

    console.log("Found dependencies: [" + moduleDependencies.join(":") +
      "]");
    saveCode(fileName, code, moduleDependencies);
  };
  define.amd = true; // Needed to make sure define gets called


  try {
    var z = eval(code);
  } catch (e) {
    // Yes, pokeman error handling...
    // We don't care if the code actually runs, so long as 'define' gets called.
  }
}


console.log("Starting");
processFiles();

【讨论】：

这听起来像是我们（Kendo UI 团队）应该解决的问题。我将尝试根据您的解释重现该问题，并将其作为问题提交给我们。
@underlog - 将其作为票证发送已在我的 TODO 列表中。其中一件事是我从未有时间去做的。
@underlog 你能告诉我这个问题的状态吗？如果您创建了问题，请发送链接，以便我可以跟踪问题。
@SandeepanNath - 我没有打开这张票，而是解释一下答案：Telerik 正在考虑在未来的版本中添加一个 /kendo 前缀到依赖链。跨度>

【解决方案2】：

我们遇到了与描述相同的问题：require.js + kendo + optimization 在成功构建过程后导致同样的错误。

但是，上面的解决方案并不适合我，因为它处理的是 3rd 方代码。我寻找了另一种解决方案，我发现如果我从构建中排除整个剑道，它仍然会在运行时下载。我使用 kendo.mobile.min.js ，它包含所有依赖项，并且与项目的其余部分很好地配合，这是优化的。因此，整个应用只需要下载 3 个 js 文件：require、optimized build 和 kendo。

换句话说，如果您可以负担将剑道作为单独资源加载，请将以下内容添加到构建配置中：

{
    baseUrl: "...",
    exclude: ['kendo.min'],
    include: ['jquery'],
(...)
}

【讨论】：