Kendo Modules 和 RequireJS (r.js) 表现不佳.(加载时出错) [英] Kendo Modules and RequireJS (r.js) not playing nice. (Error on loading)

问题描述

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

I am using Kendo UI version 2013.1.514 and RequireJS (r.js version 2.1.6)

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

My project runs perfectly under the standard RequireJS on-demand loading.

但是，当我尝试使用优化器时，Kendo 都不会加载.包括它们中的任何一个都会导致著名的未捕获错误:不匹配的匿名定义()模块:错误.

However, when I try to use the optimizer, none of the Kendo will load. Including any of them gives the famous-and-irritation Uncaught Error: Mismatched anonymous define() module: error.

这是我的配置:

{
    "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 以查看是否解决了问题.)

I am not sure if this is related or not, but the dependency tracing does not appear to work correctly either. (It will successfully trace one level deep, but not two levels deep. I had attempted to add core.min and userevents.min manually to see if that resolved the issue.)

有人在使用 Kendo 时遇到过这个问题吗?或者类似的东西?我检查了一堆现有问题，但没有发现任何与此设置相关的问题.

Has anyone experienced this issue with Kendo? Or perhaps something similar? I checked through a bunch of existing questions, but didn't find anything connected to this setup.

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

I can post additional information, if needed, but the detailed console.log message crashed somewhere inside of require.js -- not at a usable syntax error.

附加信息

页面本身的 HTML/Javascript

The HTML/Javascript on the page itself

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

推荐答案

我解决了.

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

I solved it.

While Kendo does support RequireJS, it uses the 'require' is a dynamic way that is not very friendly to optimizer.

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

My solution was to write a script that would "unwrap" the script, extract out the needed dependencies and then write the script into a new file.

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 + "]," + "
" +
    code + "
" +
    ");";

  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 Modules 和 RequireJS (r.js) 表现不佳.(加载时出错)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！