All geek questions in one place

Kendo and RequireJS (r.js) modules do not play well. (Error loading)

I am using Kendo UIversion 2013.1.514and RequireJS( r.jsversion 2.1.6)

My project works fine under standard load RequireJSon demand.

However, when I try to use the optimizer, none of Kendo will boot. Enabling any of them gives a known and annoying error Uncaught Error: Mismatched anonymous define() module:.

This is my configuration:

{
    "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"
}

AND 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")
});

I'm not sure if this is related or not, but dependency tracing also does not work correctly. (He will successfully track one level in depth, but not two levels. I tried to add core.minand userevents.minmanually to find out if this resolved the problem.)

- Kendo? - ? , .

, , 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>
+3
2

.

Kendo RequireJS, "require" - , .

script, "" script, script .

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();
+2

, : require.js + kendo + optimization, .

, . , , , . kendo.mobile.min.js, , . 3 js: require, .

, , :

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

Source: https://habr.com/ru/post/1530625/

More articles:


All Articles